Alleycode Help

Alleycode HTML Editor
Alleycode is an Internet-ready 32-bit HTML editor for Windows. Alleycode presents an intuitive interface for rapid deployment, a small footprint which translates into fast rendering and robust C++ constructions for trouble free usage.

Cool Features:
  • Synchro View...
    Synchro View allows you to see your progress in real time, you can also display two way synchronised code/design. Valuable time saver when dealing with large files and looking for a particular piece of information.

  • Smart XHTML Tags...
    Alleycode automatically formats 'Empty XHTML Elements' based on your 'DOCTYPE'.

  • Quick Edit...
    Right click enabled HTML tags for fast wizard supported updates. Covers all essential tags!

  • Assignments...
    Quick access to works in progress. Enter a name and project path + Add + OK. Your assignment is now available via a dropdown menu at the top of your 'Directory window".

  • CSS Wizard...
    Intuitive Style Sheet Wizard allows you to create/update either internal or external style sheets (CSS1 - CSS2).

  • Turf View...
    A somewhat unusual real estate view of your project. Convenient if you a have a small screen. Turf gives you complete "right click"control over Alleycode.

  • Optimizer...
    Alleycode includes you a very usefull "Optimizer" wizard which will help you keep your meta content accurate and search engine friendly.

  • Need somewhere to Start: Quick Start Tutorial will show you how to build a simple foundation Web site!


Support and Forums
Support (non-registered):

First check our help files as well as forums for support and community assistance. If you cannot find the answer to your question, register and post your query. We will endeavor to answer as many forum questions as possible. All bug reports should also be posted in the forum. Alleycode forums

Registered Support:

First check our Help files for an answer, you should also check our Forums for query replies.
Otherwise you can reach support at: support@alleycode.com
Please include your first and last name as per your registration in all communication with Alleycode.

All non-technical questions (sales or administration) can be forwarded to: admin@alleycode.com


Support Alleycode
Alleycode may be used free of charge, but if you find it useful and wish to express your appreciation for the time and resources the author has expended developing and supporting it over the years, and also help defer the costs of running the web and news servers, we do accept and appreciate donations. See also License agreement.

How to make a Donation:
Please visit our secure 'donations' web site:
http://www.alleycode.com/register.htm
For more information please contact:
support@alleycode.com
Thank you in advance for your support!


How to Install or Remove
System requirement
Windows 95/98/Me/NT4/2000/XP or higher.

To save this setup to disk for installation:
1)In the File Download box, select Save this program to disk.
2) Save the file named "setup.exe" to your hard drive.
3) When you're ready to install, locate setup.exe on your hard drive and double-click the file to begin installation.
4) The InstallShield Wizard will then guide you through the setup.

To uninstall:
1) Double click "My computer" on your desktop.
2) Double click "Control Panel".
2) Double click "Add/Remove Programs" and double-click 'Alleycode HTML1.0' in the list box.
3) InstallShield will remove all related components.


Licensing

Alleycode HTML Editor License
======================

Except where otherwise noted, all of the documentation and software included in the Alleycode HTML Editor package is copyrighted by Roger Remacle and Konae Technologies, Inc.

Copyright (C) 2003-2004 Roger Remacle and Konae Technologies, Inc.. All rights reserved.

This software is provided "as-is," without any express or implied warranty. In no event shall the author be held liable for any damages arising from the use of this software.

Permission is granted to anyone to use this software for any purpose, including commercial applications.

Distribution:
Alleycode is distributed "as is" and without any warranty as to merchantability or fitness for a particular purpose or any other warranties either expressed or implied. the author will not be liable for data loss, damages, loss of profits or any other kind of loss while using or misusing this software.

How to make a Donation


Heh!... What's alley77564536.html
alley77564536.html was setup in your working website directory to allow usage of Synchro View without saving your working file prior to Alleycode v2.13. Alleycode still uses temporary alley77564536.html. However, these files are now generated either in your executable (application) or root Dir and incorporate a cleanup routine which deletes the temporary viewing file (alley77564536.html) on exit.

Anyways, If you find an old alley77564536.html file in your website building folder you can safely delete it.


Quick Start Tutorial - Build!
NOTE: This is part 1 of our 3 part Quick Start Tutorial. Part 2, Part 3.
Quick Start Tutorial Help Forum

The following tutorial is meant to give you a taste of HTML and to demonstrate Alleycode's ability to design a simple yet professional Web site regardless of your HTML knowledge. Although Alleycode is a pure HTML editor (meaning you have full control over your code) you will find building a Web site quick and efficient with the use of built in Wizards and a bit of planning. You can view our finished sample Web site here.

Learning to code a Web site is the most important step you will take on your road to professional Web design. There is a variety of editors on the market as well as browser based template generators which will let you build a Web site without ever seeing a single HTML tag. However, as easy as that may seem, there are limitations to such systems including in some cases heavy and convoluted coding which can dramatically increase loading time. By learning and understanding basic coding techniques you will always be able to rectify problems which may arise with a few simple corrections regardless of the editor you are using.

Syntax convention:
Red: HTML tags.
Blue: Paths... Menu or System.
Green: You type...
Bold: You do.. Commands.
Go to and Click: Refers to Alleycode's menu. Most of the menu commands used in this tutorial are also available as toolbar button. However, for the sake of brevity references will only be made to menu commands.

Let's get started...
First of all let's get organized... The plan is to build a simple 5 page site with a basic logo and a menu system incorporating style sheets for easy navigation.

1) Create a new HTML page..
a) From the menu go to and Click: File > New > HTML Page... A new HTML page opens in your editor ready to go.
b) Go to line 3 ( don't worry if you don't have line numbers, we'll fix that in a minute) and replace "Your Title Here" with "My easy Web site" in <title></title>.
2) Save your new document As...
a) Go to and Click: File > Save As. The "Save As" dialog box opens.
b) Locate the "Save in" field and locate your "Alleycode" folder (c:\Program Files\Alleycode\Tutorial) which translates into:
c) Open your "Program Files" directory.
d) Open the "Alleycode" folder and then open the "Tutorial" folder (this is true provided you used default settings when installing Alleycode).
e) "Save As" is prompting you to save your document as "Untitled-1.html". Change that to "index.html" and click "Save".
NOTE: Alleycode is able to distinguish between "new" unsaved and previously saved pages when it comes time to inserting certain tags into a document. For example when you insert an image in your "index.html", you will notice a relative path to your working directory ( "images/yourimage.gif " ). If this was a "new" previously unsaved document Alleycode would insert a full path ("c:\Program Files\Alleycode\Tutorial\images\yourimage.gif"). It is most important to name and save files before adding images to ensure relative paths are inserted. Full paths are not recognized by hosting servers and will return broken images when called upon by surfers! And on top of that if you test a page from your hosting server with a unrecognized "full path" it may still show correctly in your browser because the image is cached on your system... Jungle trap!

While in your tutorial directory you will also notice an "images" and "include" directories. "images" contains several graphics which we will use to build our sample Web site. Separating "images" (graphics) and "include" files (miscellaneous files like style sheets or javascripts) makes for an organized directory structure which is also set for final transfer to your hosting server.

3) To make life easier we'll let Alleycode create an Assignment for your new "Easy Web site". Go to and Click on: View > Directory Window . At the top of the Directory Window you will see a disabled field which reads "Assignments" and to it's left, the "Set Assignment" button.
a) Click the "Set Assignment" button. The Assignment window opens.
b) In the Name field type: "Easy Web site".
c) Click on the (...) button next to the path field.
d) A "Browse for Folder" dialog opens. Locate your "Tutorial" directory... Should be: ("c:\Program Files\Alleycode\Tutorial\") Click OK!.
e) The path should now be visible in your "Path" field.
f) Click the "Add" button. "Easy Web site" should now be listed in the listbox. Click OK!.
g) The disabled "Assignment" at the top of your "Directory Window" should now be enabled and "Easy Web site" available for viewing.
4) Before we continue let's set a few Preferences...
a) Go to: Tools > Preferences > General .
b) If not already checked, Check (Select) "Display Directory Window" and "Reload Open Document". Click OK!.
c) Re-Open Preferences and select "Editor". If not already checked, Check "Show Line Numbers" and "Enable Auto Indent". Click OK!

Close and restart Alleycode... Window Directory, line numbers and last page opened should be present and ready to go.
Let's start building...
5) We'll start with our Properties.
a) Go to and Click Tools > Properties.Click on the(...) button next to "Bg Color".
b) The color dialog opens, From basic colors Select white and Click "Insert". #FFFFFF is now displayed in the "Bg Color" field.
c) Click "Insert" again. This time "bgcolor=#FFFFFF" is added to line 9 in your open document. Your background color is now white.
6) Next we'll build our header and logo (which we conveniently created for you. You can create and replace your own logo at a later time). We'll first build a "Table" to hold our logo and background images in place...
a) Place you cursor at the beginning of line 10 (should be a clear line between <body bgcolor="#FFFFFF"></body>).
b) Go to and Click Tools >Table Wizard .Table dialog opens. Enter the following in the appropriate fields.
c) Row = 1
d) Column = 2
e) Width = 80 and change "Pixel" to "Percent". Use the dropdown arrow to change.
f) Align = "Center"
g) Click "Insert".

Your document should look like this! (Use the back button to return!)
7) Now let's insert our logo...
a) Place you cursor in line 13 between <td> and </td> ("td" stands for "Table Data" which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc...).
b) Go to and Click Insert > Images > Default
c) Navigate to your Tutorial directory and open the "images" directory.
d) Locate "easylogo.gif" and Click "Open".
e) Line 13 should now look like this: <td><img src="images/easylogo.gif" width="179" height="63" border="0" alt=""></td>
8) The second portion of our logo requires a background image. A background image will fill a particular space regardless of size.
a) In Line 14 place your cursor in the <td> tag right after the letter "d".
b) Click your keyboard's space bar to create a space <td |>.
c) Go to and Click: Insert > Images > Background.
d) Navigate to your "Tutorial/images" directory and select "easybckgrd.gif". Click "Open".
e) Line 14 should now look like this: <td background="images/easybckgrd.gif"></td>.
Take a look at what you have accomplished so far. Go to and Click View > Synchro view. Your HTML code is parsed and displayed above or below (adjustable in Preferences) your code editor. You can see your logo and another stripped bar to it's right... But it doesn't look right does it? Go back to your code and look at the size of the logo in line 13 (easylogo.gif" width="179" height="63"), we need to match logo and <td> width...
f) In your logo <td> create a space after the "d" with your keyboard space bar and type width="179" (same width as your image).
g) Now your <td> should look like this: <td width="179">.
h) Double Click anywhere in your code editor (or you can also click the refresh button at the top left of Synchro View) to see your changes in Synchro View.
By the way, you can also resize "Synchro View" by running your cursor over the Synchro bar. When the "Vertical Split" cursor appears, use your left mouse button to drag accordingly. And most important "Synchro View" allows two way synchronized code/design highlighting. Highlight a portion of code in your editor for reciprocal highlighted location in "Synchro View" (or vise versa). This may not seem like such a big deal with just a few lines of code, but when your documnent contains over 300 lines it makes locating and adjusting code a snap!

Much better!... We have given the logo <td> a fixed width which essentially gives the background <td> the balance of space to utilize. In this case the background picture stretches to fill the table width minus 179 pixels.

9) Save your document. You should get in the habit of saving your document every 5- 10 modifications.
a) Go to and Click File > Save.
10) Next we will build our Menu. Our sample site has 5 pages but we will actually create 6 <td> so our Menu doesn't stretch across the total width of our site.
a) Place your cursor at the beginning of line 17 (line must be empty) and open your Table Wizard (see paragraph 6 if you forgot how).
b) Enter the following in the appropriate fields.
c) Row = 1
d) Column = 6
e) Width = 80 and change "Pixel" to "Percent". Use the dropdown arrow to change.
f) Align = "Center"
g) Click "Insert".

Your document should now look like this! (Use the back button to return!)
11) Before we continue I want you to build a quick reference to the additional 4 pages of our sample Web site.
a) Open a new HTML page (see paragraph 1).
b) Replace "Your Title Here" with "About" in <title></title>.
c) Just below the <body> tag type: "My About Page"
d) Save your document As.. "about.html... (see paragraph 2 if you forgot).
e) Repeat the same process for "My Specials Page", My Sitemap Page", My Contact Page" and Save As... "specials.html", "sitemap.html", "contact.html" .
12) Ready to build our Menu. Starting at line 20...
a) In between your <td></td> tags type the word "Home".
b) Repeat the same with the word "About" in line 21,
c) "Specials" in line 22,
d) "Sitemap" in line 23,
e) "Contact" in line 24.
f) In line 25 enter a "non-breaking space". Go to and Click Insert > HTML Tags > Non Breaking Space.

Remember to save as you go and also refresh your Synchro View to see live results... Take a look at your Menu.
13) Presently your Menu is stretched across the width of your table which doesn't look good. Let's resize it. All we need to do is to tell the empty <td> to take up more space so the Menu can align nicely to the left.
a) In the <td> tag (line 25) place your cursor after the "d" and on your keyboard press the space bar to create a space.
b) Type width="60%" at the cursor position. Notice the % sign. The percentage value allows the empty <td></td> to stretch while keeping the "Menu" index constant.
14) Now we will link our Web site! We'll start with "Home".
a) In line 20 highlight the word "Home".
b) Go to and Click Insert > Hyperlink. The Hyperlink dialog opens. Notice the word "Home" is already inserted in the "Content" field.
c) Click the "Open File" dialog which is to the right of the "Link" field.
d) Navigate to your "Tutorial" directory and select "index.html". Click "Open". The file name "index.html" is now visible in your "Link" field.
e) Click "Insert" to insert the link into your document. Line 20 should look like this: <td><a href="index.html">Home</a></td>.
f) One more thing, let's add a couple Non Breaking Spaces on each side of "Home" to space out our Menu index.
g) Line 20 should now look like this: <td><a href="index.html">&nbsp;Home&nbsp;</a></td>.
h) Repeat the same process for lines 21 to 24 with corresponding files. Don't touch line 25.

Your document should now look like this! (Use the back button to return!).
Before we continue, check out your work in Synchro View (paragraph 8 if you forgot) and test your Menu links... Clicking on a Menu link in Synchro View takes you to appropriate linked page (providing you saved your test pages in your "Tutorial" directory) as it would live on a server. Synchro View also enables "Go Back" and "Go Forward" buttons which allows you to travel between pages.

15) You're doing good... Now we will build our main table...
a) Place your cursor at the beginning of line 28.
b) Open your Table Wizard and complete the following:
c) Row = 1
d) Column = 2
e) Width = 80 and change "Pixel" to "Percent". Use the dropdown arrow to change.
f) Align = "Center"
g) Click "Insert".
16) We want to create a left bar which can be used for additional navigation, links or?...
a) On line 31 in the <td> type width="150" after the "d".
b) We also want to set a background color for our bar so add bgcolor="#FBF3E1".
c) Finally add a "Non Breaking Space" between <td></td>.
d) Line 31 should now look like this: <td width="150" bgcolor="#FBF3E1">&nbsp;</td>.
NOTE: #FBF3E1 happens to be the color code I picked for this project, you could also use your "Color Picker" to insert the color of your choice at the cursor location. Your Color Picker is at: Insert > Color....

That covered the basic layout of our Web site. Let's move on to Quick Start Tutorial - With Style!


Quick Start Tutorial - With Style!
NOTE: This is part 2 of our 3 part Quick Start Tutorial. Part 1, Part 3.
Quick Start Tutorial Help Forum

Syntax convention:
Red: HTML tags.
Blue: Paths... Menu or System.
Green: You type...
Bold: You do.. Commands.
Go to and Click: Refers to Alleycode's menu. Most of the menu commands used in this tutorial are also available as toolbar button. However, for the sake of brevity references will only be made to menu commands.

Time for some Style...
Cascading Style Sheets (CSS) is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once. As a Web developer you can define a style for each HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all elements in the Web are updated automatically. Our index page tutorial will use an "Internal Style Sheet" which defines internal styles in the head section by using the <style> tag.

17) Ready for style, make sure your index.html page is focused...
a) Go to and Click Tools > Style Sheet Wizard.
b) The Style Sheet dialog opens at the "Action" tab. Option "1" is pre-selected "Add or Create a Style in an open HTML page?". That's our choice...
c) Click on the "Application - Text" tab.
d) Select "New Class Name" (it should already be selected by default) and change the word "NewClass" to "menu".
e) Check "Activate Font Set..." This enables all font related elements.
f) In "First" field use the dropdown menu arrow to locate available fonts on your system. Select "Arial". NOTE: In the unlikely event "Arial" is not available select a font of your choice.
g) In "Font Size" Click Length and use the up-down arrow to move (px) pixel size to 12.
h) In "Properties" change "Weight" field to "Bold" by using the dropdown arrow.
i) Click the "Alignment - Background" tab.
j) In "Color" Click on the (...) Foreground button. Color dialog opens.
k) In "Basic Colors" Click on white and Click OK. "#FFFFFF" color code is now in your "Foreground" field.
l) In the "Color" "Background" field type: #e9924c. As before this is the color I chose for this tutorial... Humor me, thanks.
m) Click " Insert" ... Top right corner of your CSS Wizard.
n) Generated style is automatically inserted in the <head></head> of your document.
o) CSS Wizards returns you to the "Application - Text" tab and prompts you to "Create another Style string or Exit!"
18) The following three sections of our Style deal with what happens when viewers run their cursor over and/or use your Menu. We'll start with A:link (A:link as well as the following "visited" and "hover" will actually be part of our "menu" class, they are called "Pseudo-classes"). For "A:link" we want the same default style as in (paragraph 17). If CSS Wizard is still open at "Create another Style string or Exit!" continue from there. Otherwise simply re-open CSS Wizard, accept default option 1 in the "Action" page and Click on "Application - Text" tab to continue...
a) Select "New Class Name" (it should already be selected by default) and change the word "NewClass" to "menu".
b) Check "Link Set".. "A:link" is now visible... Good that's our choice.
c) Check "Activate Font Set..." This enables all font related elements.
d) In "First" field use the dropdown menu arrow to locate available fonts on your system. Select "Arial".
e) In "Font Size" Click Length and use the up-down arrow to move (px) pixel size to 12.
f) In "Properties" change the "Decoration" field to "none".
g) Click the "Alignment - Background" tab.
h) In "Color" Click on the (...) Foreground button. Color dialog opens.
i) In "Basic Colors" Click on white and Click OK. "#FFFFFF" color code is now in your "Foreground" field.
j) Click " Insert" ... Top right corner of your CSS Wizard.
k) Generated style is automatically added to the existing Style sheet of your document.
l) CSS Wizards returns you to the "Application - Text" tab and prompts you to "Create another Style string or Exit!"
19) Still dealing with our Menu, next step is what happens after a link is visited (A:visited)... Again, default style (paragraph 17)...
a) Select "New Class Name" (it should already be selected by default) and change the word "NewClass" to "menu".
b) Check "Link Set".. "A:link" is visible... Use your dropdown arrow to change that to A:visited.
c) Check "Activate Font Set..." This enables all font related elements.
d) In "First" field use the dropdown menu arrow to locate available fonts on your system. Select "Arial".
e) In "Font Size" Click Length and use the up-down arrow to move (px) pixel size to 12.
f) In "Properties" change the "Decoration" field to "none".
g) Click the "Alignment - Background" tab.
h) In "Color" Click on the (...) Foreground button. Color dialog opens.
i) In "Basic Colors" Click on white and Click OK. "#FFFFFF" color code is now in your "Foreground" field.
j) Click " Insert" ... Top right corner of your CSS Wizard.
k) Generated style is automatically added to the existing Style sheet of your document.
l) CSS Wizards returns you to the "Application - Text" tab and prompts you to "Create another Style string or Exit!"
20) Our final Menu style deals with "Hover"... In this case we want our Menu to change when viewers run their cursor over a particular Menu index...
a) Select "New Class Name" (it should already be selected by default) and change the word "NewClass" to "menu".
b) Check "Link Set".. "A:link" is now visible... Use your dropdown arrow to change that to A:hover.
c) Check "Activate Font Set..." This enables all font related elements.
d) In "First" field use the dropdown menu arrow to locate available fonts on your system. Select "Arial".
e) In "Font Size" Click Length and use the up-down arrow to move (px) pixel size to 12.
f) In "Properties" change "Weight" field to "Bold" by using the dropdown arrow.
g) Click the "Alignment - Background" tab.
h) In "Color" Click on the (...) Foreground button. Color dialog opens.
i) In "Basic Colors" Click on black and Click OK. "#000000" color code is now in your "Foreground" field.
j) In the "Color" "Background" field type: #fbf3e1.
k) Click " Insert" ... Top right corner of your CSS Wizard.
l) Generated style is automatically added to the existing Style sheet of your document.
m) CSS Wizards returns you to the "Application - Text" tab and prompts you to "Create another Style string or Exit!"
21) The next two styles deal with borders. Our first creates a single solid orange/rust line around our main table...
a) Select "New Class Name" (it should already be selected by default) and change the word "NewClass" to "tableborder".
b) Click the "Tables - Borders" tab.
c) Check "Box Border"... This enables "Box Border" elements.
d) For "Size (px)" use the up-down arrow to move (px) pixel size to 1.
e) For "Style" use the dropdown box and select "solid".
f) In the "Color" field type: #e9924c.
g) Click " Insert" ... Top right corner of your CSS Wizard.
h) Generated style is automatically added to the existing Style sheet of your document.
i) CSS Wizards returns you to the "Application - Text" tab and prompts you to "Create another Style string or Exit!"
22) Our last Style generates a single solid orange/rust right border for our left bar to be consistent with our table border...
a) Select "New Class Name" (it should already be selected by default) and change the word "NewClass" to "tableborder".
b) Click the "Tables - Borders" tab.
c) Check "Right Border"... This enables "Right Border" elements.
d) For "Size (px)" use the up-down arrow to move (px) pixel size to 1.
e) For "Style" use the dropdown box and select "solid".
f) In the "Color" field type: #e9924c.
g) Click " Insert" ... Top right corner of your CSS Wizard.
h) Generated style is automatically added to the existing Style sheet of your document.
i) CSS Wizards returns you to the "Application - Text" tab and prompts you to "Create another Style string or Exit!" Click the "Close" button, you're done!

Your document should look like this! (Use the back button to return!)
Good now take a look at your Web site in Synchro View ( View > Synchro View or Double Click anywhere in your editor)...

23) Huh?... Nothing's changed?... That's because we haven't assigned any "classes" to our tags. We need to assign our "menu" class to lines 30, 31, 32, 33 and 34 ...
a) In line 30 create a space after the "d" of <td>.
b) Go to and Click Insert > CSS > Class Selector.
c) Type "menu" at the blinking cursor location.
d) Your line should look like this <td class="menu"><a href="index.html">&nbsp;Home&nbsp;</a></td>
e) Repeat the above steps for lines 31, 32, 33, 34.
After repeating the above process 5 times you may be wondering why didn't we simply apply the "menu" class to the table? The answer is because we want our orange/rust background color applied to the Menu index only, not the width of the table...

24) Next we'll add our border Styles...
a) In line 39 create a space right after the word "<table.
b) Go to and Click Insert > CSS > Class Selector.
c) Type "tableborder" at the blinking cursor location.
a) In line 41 create a space right after the "d" of "<td"
b) Go to and Click Insert > CSS > Class Selector.
c) Type "tdborder" at the blinking cursor location.

Your document should look like this! (Use the back button to return!) ... Check out your work in Synchro View!
25) The final step for our main page is to add some content. To do this we will actually embed a table within a table for more control....
a) In line 42 place you cursor between <td></td>.
b) Go to and Click Tools >Table Wizard .Table dialog opens. Enter the following in the appropriate fields.
c) Row = 1
d) Column = 2
e) Width = 90 and change "Pixel" to "Percent". Use the dropdown arrow to change.
f) Align = "Center"
g) Click "Insert".
26) We need some text content to fill up our Web site. Either write a nice 3 paragraph autobiography or simply enter a bunch of "blablablas".
a) On line 45 just after the "d" of <td type width="60%" .
b) In line 45 place you cursor between <td width="60%"></td>.
c) Go to and Click Insert > HTML Tags > paragraph.
d) Write a nice 30- 45 word paragraph in between <p></p>.
e) Repeat steps "b" and "c" two more times.
27) Now we'll add some flavor to our site...
a) Place you cursor between <td></td>. Which is the second <td></td> of our embedded table.
b) Go to and Click Insert > Images > Default
c) Navigate to your Tutorial directory and open the "images" directory.
d) Locate "spacecadet.gif" and Click "Open".
e)Your line look like this: <td><img src="images/spacecadet.gif" width="143" height="205" border="0" alt=""></td>
f) In the "alt=" type "Yes... I could very well be a Space Cadet" (it's ok I know him well, go ahead).
28) Small finishing touches... (spacing and positioning)
a) Place your cursor in line 46 just after <td width="60%">
b) Go to and Click Insert > HTML Tags > Line Break Twice.
c) The beginning of your line should look like this: <td width="60%"><br><br><p>
a) Place your cursor right after the closing </p> of your third paragraph.
b) Go to and Click Insert > HTML Tags > Line Break Twice.
c) The end of your third paragraph should look something like this: "bla bla bla"</p><br><br></td>
a) Locate the line containing "spacecadet.gif"... Right after your paragraphs.
b) Type width="40%" right after the "d" of <td>.
c) Create a space and place your cursor right after the "%" of <td width="40%">.
c) Go an Click Insert > HTML Tags > Horizontal Align > Center

Your document should finally look like this! (Use the back button to return!)
Your last step is to upload your new Web site to your server. The most common approach is via FTP "File Protocol Transfer", a good hosting facility will always include FTP transfer. You will find FTP software here and a tutorial here.

Keep your directory structure as is. All links, images, and includes should stay intact when uploading to your server.

Congrats!... Your first Web (maybe) page... but not your last!

For now, our Web site consists of one finished page and 4 additional pages which are simply returning a title. Obviously you can repeat the above procedures and finish each of those extra pages individually. However, having to repeat the above steps four more times seems like a lot of work don't you think?... Wouldn't it be nice if there was a way to generate these pages automatically while still being able to individualize the content? Well of course there is... Actually there are several ways you can do it... My favorite is with the magic of PHP. And as I mentioned at the the top of this page CSS can control multiple Web pages at once using "External Style Sheets". See our Quick Start Tutorial - Advanced for details.


Quick Start Tutorial - Advanced!
NOTE: This is part 3 of our 3 part Quick Start Tutorial. Part 1, Part 2.
Quick Start Tutorial Help Forum

Our third part is a brief demonstration of CSS "External Style Sheet" and PHP "Include files". You will find additional tutorial links (recommended) covering both applications here!

29) Using one "Style Sheet" to modify our entire Web site... We already have an Internal Style Sheet, in this case we will simply convert it into an "External Style Sheet".
a) Go to and Click File > New > Style Sheet. A blank document opens named "Untitled-?.css".
b) Go back to index.htm
c) Highlight content from line 9 to 14. Go to and Click Edit > Copy.
d) Go back to "Untitled-?.css", place your cursor at the top left hand of your empty document.
e) Go to and Click Edit > Paste.
f) Got to and Click File > Save As... Locate your "Tutorial" folder and Open your "include" folder.
g) "Save As" is prompting you to save your document as "Untitled-?.css". Change that to "easy.css" and click "Save".

easy.css should look like this (Use the back button to return!).
30) So far our Style sheet addresses our Menu font and border style...We need to define a style for the font or in this case, we'll define a global font in the "body" tag...
a) Focus on easy.css.
b) Open your CSS Wizard and select option "3".. "Add to an External Style Sheet".
c) Click on "Application - Test".
d) In "Style" Select "Apply Style to HTML Tag". Use the dropdown menu to locate "BODY".
e) Select "Active Font Set".
f) In "First" field locate "Arial".
g) In "Font Size" change the "length" to 12 (px).
h) Click Save... BODY { font-family: Arial; font-size:12px; } is added to easy.css.
i) Close CSS Wizard.
j) Save easy.css.
31) Connecting your "External Style Sheet" to your Web site...
a) Open "about.html", "specials.html", "sitemap.html" and "contact.html".
b) In "contact.html" create a "new line" right after <meta name="Keywords" content="Your keywords here...">;
c) Go to and Click Insert > CSS > Remote Link.
d) At the blinking cursor type "/include/easy.css".
e) Your line should look like this: <link rel="stylesheet" type="text/css" href="/include/easy.css">
f) Save and refresh results in "Synchro View"... Your font style changed to "arial".
g) Repeat the above steps for "about.html","specials.html" and "sitemap.html".
32) Let's also update our index.html page...
a) Open index.html
b) Highlight and Copy <link rel="stylesheet" type="text/css" href="/include/easy.css"> from "contact.html"
c) In "index.html" Highlight lines 7 to 16... Click "Paste".
d) Save.
Now, all changes to style.css will update your entire web site. Go ahead and experiment by changing font style, color and size...

PHP magic.. Teaching you PHP is beyond the scope of this quick tutorial. Suffice to say, PHP seamlessly integrates with HTML and can make updating and controlling large Web sites easy and painless. PHP is also a favorite way to make your Web site interactive with feedback forms and/or to extract data from a database.

NOTE: Not all sites are capable of using PHP, as it requires that PHP be installed on your server. Better hosting companies will have PHP capability, however smaller, free sites often will not.

To test and see if PHP works on your site do the following...
a) Open a new "PHP script" file.
b) Type the following between <? and ?> "phpinfo();".
c) Save As... "test.php" in your tutorial directory.
d) Upload the new file to your server.
e) Now visit the new page. If it looks like what you typed in, then you do not have PHP, if you see a "lot" of information, then PHP works on your site.
If you do not have PHP check with your hosting facility about getting it... If the above test returned positive then go through the following steps and make your new Web site "Dynamic".

33) Start with the "Header"...
a) Open a new "Plain Text" file.
b) Open "index.html"
c) Highlight lines 20 <body bgcolor="#FFFFFF"> to 36. Only include <td width="60%"> of line 36 and Copy.
e) Place your cursor at the top left hand corner of your plain Text file (Untitled-?.txt) and Paste.
f) Save your Untitled-?.txt As... easyhead.txt in your "Tutorial/include" folder.

Your "easyhead.txt" should look like this(Use the back button to return!).
34) Build your "Footer"...
a) Open a new "Plain Text" file.
b) Open "index.html"
c) Highlight the last 6 lines of your document starting at </td> and Copy.
e) Place your cursor at the top left hand corner of your plain Text file (Untitled-?.txt) and Paste.
f) Save your Untitled-?.txt As... easyfoot.txt in your "Tutorial/include" folder.

Your "easyfoot.txt" should look like this (Use the back button to return!).
35) Insert your "Header" and "Footer"...
a) Open "about.html".
b) Place your cursor at a new line just below <body bgcolor="#FFFFFF">.
c) Go to and Click Insert> PHP Tags > PHP tags.
d) And go to and Click Insert > PHP tags > Include.
e) After "/include/" type easyhead.txt.
f) Place your cursor at a new line just below "My About Page".
g) Go to and Click Insert> PHP Tags > PHP tags.
h) And go to and Click Insert > PHP tags > Include.
i) After "/include/" type easyfoot.txt.
j) In "Libraries" Click on the HTML tab. Use the dropdown menu and select "HTML 4.1".
k) In "about.html" highlight "My About Page".
l) Select and Double Click "blockquote" in HTML 4.1.
m) "My About Page" should look like this <blockquote>My About Page</blockquote>.
n) Save about.html.
o) Repeat the above steps with "specials.html", "sitemap.html" and "contact.html".

about.html should look like this (Use the back button to return!).
Upload updated content to your server and enjoy the results... Your next step is to start experimenting and never stop! If you need additional help remember to check our Forum for answers. Or check the Forum and help someone else.

Roger Remacle
Alleycode Support


Text Toolbar
The Text Toolbar allows you to insert common Text tags quickly and easily. It also supports useful tools such as Print, Search, Utilities and Turf Mode.

The Text Toolbar is displayed across the top of the document window. By default the Text toolbar is displayed when launching Alleycode (adjustable in Preferences).

Left click button or link for details...

New ... Creates .html .txt or .php page.
Open existing document(s).
Save an opened document to the existing filename.
Save All document to existing filenames.
Print a document.
Cut ... Deletes text and moves it to the clipboard.
Copy text to the clipboard.
Paste text from the clipboard into the document.
Undo ... Reverse previous editing operation.
Redo ... Reverse previous undo operation.
Find for specified text in a opened document.
Find and Replace specific text with different text.
WordWrap... Helps to edit long lines more conveniently.
Directory... Will open your directory folder.
HTML Toolbar will show HTML, CSS, PHP toolbar.
Turf Mode gives more screen space.
Preferences allows you to customize Alleycode.
Help ... How to use.
Exit ... Close Alleycode.

See also:
HTML Toolbar
Common Toolbar
Tables Toolbar
Forms Toolbar
CSS Toolbar
PHP Toolbar
Turf Toolbar


HTML Toolbar
The main HTML Toolbar gives you quick functionality control while the tabbed toolbar covers Common HTML tags, Tables Wizard , Forms tags, CSS Wizard and PHP samples and statements.

New ... Creates .html .txt or .php page.
Open existing document(s).
Save an opened document to the existing filename.
Save All document to existing filenames.
Directory... Will open your directory folder.
Libraries... Will open your libraries folders.
Turf View gives more screen space.
Preferences allows you to customize Alleycode.
FTP... Upload your documents.
Help ... How to use.
Synchro View... Synchronized code/design display.
Browser View... See instant results.
Cut ... Deletes text and moves it to the clipboard.
Copy text to the clipboard.
Paste text from the clipboard into the document.
Undo ... Reverse previous editing operation.
Redo ... Reverse previous undo operation.
Find for specified text in a opened document.
Find and Replace specific text with different text.
WordWrap... Helps to edit long lines more conveniently.

See also:
Text Toolbar
Common Toolbar
Tables Toolbar
Forms Toolbar
CSS Toolbar
PHP Toolbar
Turf Toolbar


Common Toolbar
The common toolbar gives you access to basic HTML tags, optimizer dialog, properties dialog, color picker, anchor dialog, image insert, document font selection, special characters, list insert and framesets.

Optimize your meta tags.
Properties... Define your web page options.
Color picker.
Anchor... Link your document internally/externally.
Images... Insert graphics into your document.
Break tag.
Non breaking space
Horizontal rule
Bold tag.
Italic tag.
Paragraph tag.
Comment tag.
Fonts... Select HTML font styles (not screen font).
Special characters
Horizontal Alignment
List tag... Unordered and ordered list.
Frameset tags.

See also:
Text Toolbar
HTML Toolbar
Tables Toolbar
Forms Toolbar
CSS Toolbar
PHP Toolbar
Turf Toolbar


Tables Toolbar
The table toolbar gives you access to the Table Wizard and several quick table tags.

Table Wizard
Table row
Table data
Table header
Table alignment

See also:
Text Toolbar
HTML Toolbar
Common Toolbar
Forms Toolbar
CSS Toolbar
PHP Toolbar
Turf Toolbar


Forms Toolbar
Forms toolbar gives you access to form examples and quick form tags.

Form examples
Action tag.
Text fields.
Textarea field.
Dropdown field.
Fieldset tag.
Password tag.
Radio button.
Checkbox button.
Submit button.
Reset button.
Insert image field.
Browse button.
Hidden field

See also:
Text Toolbar
HTML Toolbar
Common Toolbar
Tables Toolbar
CSS Toolbar
PHP Toolbar
Turf Toolbar


CSS Toolbar
The CSS toolbar gives you quick access to CSS wizard and common tags. CSS wizard can intuitively create or update internal or external style sheets.

Style sheet wizard
Class selector.
Link tag.

See also:
Text Toolbar
HTML Toolbar
Common Toolbar
Tables Toolbar
Forms Toolbar
PHP Toolbar
Turf Toolbar


PHP Toolbar
The PHP toolbar gives you PHP examples as well as quick tags and statements.

PHP sample scripts.
PHP open/close tags.
if statement.
else statement.
switch statement.
for loop.
while loop.
include function

See also:
Text Toolbar
HTML Toolbar
Common Toolbar
Tables Toolbar
Forms Toolbar
CSS Toolbar
Turf Toolbar


Turf Toolbar
Turf toolbar gives you complete "right click"control over Alleycode while displaying maximum screen space.

Open existing document(s).
Edit functions.
Code functions.
View functions.
Back to HTML toolbar.

See also:
Text Toolbar
HTML Toolbar
Common Toolbar
Tables Toolbar
Forms Toolbar
CSS Toolbar
PHP Toolbar


XHTML Tags

XHTML is a combination of HTML and XML (EXtensible Markup Language). XHTML consists of all the elements in HTML 4.01 combined with the syntax of XML.

XML is a markup language where everything has to be marked up correctly, which results in "well-formed" documents. XML was designed to describe data and HTML was designed to display data.

Today's market consists of different browser technologies, some browsers run Internet on computers, and some browsers run Internet on mobile phones and hand helds. The last-mentioned do not have the resources or power to interpret a "bad" markup language.

Therefore - by combining HTML and XML, and their strengths, we got a markup language that is useful now and in the future - XHTML.

XHTML pages can be read by all XML enabled devices AND while waiting for the rest of the world to upgrade to XML supported browsers, XHTML gives you the opportunity to write "well-formed" documents now, that work in all browsers and that are backward browser compatible.

Alleycode automatically formats 'Empty XHTML Elements' with proper space/forward slash. 'DOCTYPE' must be present for this function to work!

Incorrect XHTML tags:
This is a break<br>
Here comes a horizontal rule:<hr>
Here's an image <img src="happy.gif" alt="Happy face">

Correct XHTML tags:
This is a break<br />
Here comes a horizontal rule:<hr />
Here's an image <img src="happy.gif" alt="Happy face" />


Synchro View
From the menu go to: View > Synchro View

Synchro View allows you to see your progress in real time. Initial activation of Synchro View renders content automatically. To refresh, double click anywhere in your code editor or on the "Refresh" button located at the top left corner of the Synchro View window.

You can also display two way synchronized code/design. Highlight sections of your document to reciprocate the location in your Synchro viewer. Or highlight sections of the Synchro viewer to reciprocate code location in your document. This is a valuable time saver when dealing with large files and looking for a particular piece of information.

Synchro View supports HTML3.2, 4.0 as well as CSS1 and (most) CSS2.

Synchro View renders both local and remote <link rel> style sheets (working with saved documents). This function allows you to update a single remote style sheet and view live changes in several opened HTML pages.

Keyboard shortcut: Ctrl+D


Quick Edit
For quick updates simply place your cursor near the desired HTML tag and right click your mouse (must be within opening and closing bracket). If the tag is supported "Quick Edit" is enabled. Left click on "Quick Edit" to update your tag content with related open wizard.

Supported Tags:
<title> See also: Optimizer
<meta name="Keywords"> See also: Optimizer
<meta name="Description"> See also: Optimizer
<body>See also: Properties
<table>See also: Table Wizard
<tr>See also: TR Tags
<td>See also: TD Tags


Preview in Browser
From the menu go to: View > Preview in Browser > | Default
 | IE
 | Mozilla
 | Firefox
 | Opera

Click "Default" to view your selected document in your system's default Web browser.

NOTE: Alternative browsers (IE - Mozilla - Firefox - Opera) must exist on your system and be activated in Preferences to be functional.

Keyboard shortcut (Default): F11


Directory Window
From the menu go to: View > Directory Window

Use this command to access remote and system Directory folders. The Directory window can open automatically on start-up by selecting ( Preferences - General - Start Up) "Display directory Window".

Opening a single file:
Double click selected file to open.

Opening multiple files:
1) Select (highlight) files to open (Hold CTRL key down and click on every file to open).
2) Right click selection.
3) Click on "Open Selected" to display.

See also: Assignments


Assignments
From the menu go to: Tools > Assignments

Assignments gives you quick access to works in progress. Assignments is available from tools->Assignments or the speed button near the top of the "Directory window". Enter a name and project path + Add + OK. Your assignment is now available via a dropdown menu at the top of your 'Directory window".

To remove an assignment. Open your Assignments dialog, select an assignment, click "Delete" + OK.

Hint: To make access even quicker in (Preferences > General > Start Up) select "Display File manager". This automatically opens the Directory window on Alleycode start up.


Turf View
From the menu go to: View > Turf View...

Turf mode gives you maximum screen space and work environment.

Turf gives you complete "right click"control over Alleycode. Initial "right click" will give you an "Open, Edit, Code, View, Full" popup. Left click appropriately followed by a quick "right click" to display full content. Turf requires you to memorize three basic work environment reachable with quick right>Left click action.

Keyboard shortcut: Ctrl+T

See also: Turf toolbar


Table Wizard
From the menu go to: Tools > Table Wizard...
Quick Edit Enabled...

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, additional tables etc... See example below.

Rows:
Determines the number of rows you require.

Columns:
Determines the number of columns you require.

Cell Padding:
In the Cell Padding field, specify the number of pixels between the cell content and the cell boundary (or wall). Default padding is 0 pixels for no padding. If using a positive border value, we also recommended you use a positive cell padding value to separate text content from cell wall.

Cell Spacing:
In the Cell Spacing field, specify the number of pixels between each table cell. The default spacing is 2 pixels. Enter 0 for no spacing.

Border:
In the Border field, specify the width of the table border in pixels. Most browsers display the border as a three-dimensional line. If you are using the table for page layout, specify a border value of 0. Keep in mind that borders values above 2 are visually "tacky" at best.

Size and Alignment
Width:
The width field specifies pixels or a percentage value representing the total width of your table as viewed in a browser window. A percentage value allows your table to resize for a given browser resolutions while the pixel value is fixed and will initiate a horizontal scroll bar if oversized.

Alignment:
Use the alignment field to set the horizontal alignment of a cell's, column's, or row's contents. You can align the contents to the left, right, or center, or to the browser's default (usually left).

Optionals
Bg Image (background image):
Use the Bg Image field to select the background image for the table.

Bg Color (background color):
Use the Brdr Color field to select a border color for the table.

Brdr Color (border color):
Use the Brdr Color field to select a border color for the table.

Example:
Using the following table Wizard settings...

Rows:2
Columns:2
Cell Padding:0
Cell Spacing:4
Border:1
Size and Alignment
Width:70% - Percent
Alignment:Center
Optionals
Bg color:#FEF8CB

Results:
Row 1 Cell 1 | Row 1 Cell 2
Row 2 Cell 1 | Row 2 Cell 2

NOTE: Table cells with no content are not displayed very well in most browsers. In particular if you are using a positive border value.To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to make the borders visible.


CSS Wizard
From the menu go to: Tools > Style Sheet Wizard...

When a browser reads a style sheet, it will format the document according to it's content. There are three ways of inserting a style sheet. 1) an Internal Style Sheet should be used when a single document, 2) An External Style Sheet, ideal ideal when the style is applied to many pages. And Inline Style which loses many of the advantages of style sheets by mixing content with presentation. Use this method only when needed, such as when a style is to be applied to a single occurrence of an element. Inline Style option is not included in Alleycode's CSS Wizard.

Action Tab
Select your method of action:
select: 1) If you are styling or adding style to an individual document. Work your way through the CSS Wizard tabs (see below for Tab details) to create class/tag Styles. When satisfied with your Style selection click "Insert". Your Internal style is inserted in the head section of your document by using the <style> tag. Next, you are returned to the Application - text Tab prompting you for your next class/tag style choice. If you create another class/tag Style it will be inserted on a new line within the existing <style> tag. If you do not wish to create additional class/tags click "Close" to exit the application.
NOTE: A valid document must be open in Alleycode!

Select 2) for larger projects. An External Style Sheet is ideal when the style is applied to many pages. With an External style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag is inserted inside the head section. As you click on the next tab you will notice a new tab created at the end of CSS Wizard labeled "style.css". You should now work your way through the tabs (see below for Tab details) and create your class/tag Styles. When satisfied with your Style selection click "Insert". Your selection is now visible under the "style.css" tab. If you wish to create another class/tag Style click on the "Next" button or if ready to save, click on the "Saves As..." button.

Select: 3) To Update an existing External Style Sheet. See Select 2) for details.
NOTE: A valid document with a ".css" extension must be open in Alleycode!

NOTE: Once you move from the Action Tab on to the next tab, you are committed to your chosen action. If you return to the Action Tab, you will notice all options disabled. To select/start a new Style Sheet project click on the "Clear" button. Warning: All selected options in tabs 2 - 5(6) will be deleted.

Application - Text Tab
Style...
New Class Name: With the class name you can define different styles for the same type of HTML element.

Apply Style to HTML tags: Defined styles to a specific set of tags. For example FONT will convert all font to a specific style ie: Arial.

Link Set...
A link that is active, visited, unvisited, or when you mouse over a link can all be displayed in different ways in a CSS-supporting browser.
NOTE a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective. As well, a:active MUST come after a:hover in the CSS definition in order to be effective!

Active Font Set...
First: Displays available font sets on your system. Select as primary font. This font must exist on you surfers system to display.

Second: Use as a backup in case primary font does not exist on your surfers system.

Generic: Refers to the name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace". Generic font families are a fallback mechanism, a means of preserving some of the style sheet author's intent in the worst case when none of the specified fonts can be selected.

Font Size...
Absolute: Sets the size of the font to different sizes, from xx-small to xx-large.

Relative: This size value is relative to the font size of the parent element but is limited in range to that allowed by the system. For example, if the parent element has a font size of "medium", a value of "larger" will make the font size of the current element be "large".

Length: Sets the font-size to a fixed size.

Percentage: Sets the font-size to a % of the parent element.

Properties...
Weight: Sets the weight of a font. Its value can be absolute or relative to the parent container thickness if it has one.

Style: Sets the style of the font. This property applies font effects to content in the current container. If the preferred style can not be accommodated, the browser should try to find the best match to the indicated effect. Values have the following meanings:
"normal" This value indicates a font classified as 'normal' should be used (a font not italicized or oblique).
"oblique" A font specified as 'oblique' (sometimes also called Slanted or Incline) should be used. Oblique fonts often exist for sans-serif font types.
"italic" A font specified as 'italic' (or a variant of type Cursive) should be used. If one is not available, an oblique font may be used in its place.

Decoration: This property describes decorations that are added to the text of an element. If the property is specified for a block-level element, it affects all inline-level descendants of the element. If it is specified for (or affects) an inline-level element, it affects all boxes generated by the element. If the element has no content or no text content (e.g., the IMG element in HTML), user agents must ignore this property. Values have the following meanings:
"none" Produces no text decoration.
"underline" Each line of text is underlined.
"overline" Each line of text has a line above it.
"line-through" Each line of text has a line through the middle.
"blink" Text blinks (alternates between visible and invisible). Conforming user agents are not required to support this value. The color(s) required for the text decoration should be derived from the 'color' property value.

Variant: Displays text in a small-caps font or a normal font.

Word Spacing:
Increase or decrease the space between words.
Letter Spacing:
This value indicates inter-character space in addition to the default space between characters. Values may be negative, but there may be implementation-specific limits. User agents may not further increase or decrease the inter-character space in order to justify text.

Alignment- Background Tab
Indentation...
This property specifies the indentation of the first line of text in a block. The box is indented with respect to the left (or right, for right-to-left layout) edge of the box. User agents should render this indentation as blank space.
Length: Indents the first line of text in an element (fixed).

Percentage: Indents the first line of text in an element. Percentile is relative to the parent block's width.

Line Height...
Length: Sets a fixed distance between lines.

Percentage: Sets a percentile distance between lines. Refers to a percentage of the height of the containing element block.

Vertical Alignment...
Keyword: Sets the fixed vertical alignment of an element. Values have the following meanings:
"baseline" Align the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom of the box with the parent's baseline.
"middle" Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
"sub" Lower the baseline of the box to the proper position for subscripts of the parent's box. (This value has no effect on the font size of the element's text.)
"super" Raise the baseline of the box to the proper position for superscripts of the parent's box. (This value has no effect on the font size of the element's text.)
"text-top" Align the top of the box with the top of the parent element's font.
"text-bottom" Align the bottom of the box with the bottom of the parent element's font.
"top' Align the top of the box with the top of the line box.
"bottom" Align the bottom of the box with the bottom of the line box.

Percentage: Sets the percentile vertical alignment of an element. Raise (positive value) or lower (negative value) the box by this distance (a percentage of the "line-height" value). The value '0%' means the same as "baseline".

Horizontal Alignment...
Select: Sets the fixed horizontal alignment of an element. Values have the following meanings: "left", "right", "center", and "justify". Left, right, center, and double justify text, respectively.

Color...
Foreground: Sets the color of text.
Background: A shorthand property for setting all background properties in one declaration( in this case color ).

Background Image...
Image: Sets an image as the background. The value indicates the URL source for the graphic.
Repeat: If a "background-image" is specified, this value specifies how the image is repeated if the image is not large enough to cover the entire element. All image rendering covers the content and padding areas of the element's box.
Attachment: If a 'background-image' is specified, this value indicates whether or not the background image scrolls with the rest of the page.

Table - Borders Tab.
Table...
Border Model: The rendering of table borders is divided into two categories in CSS2 - "collapsed" and "separated". This property specifies which border rendering mode to use. In the collapsed border model, adjacent table cells share borders. In the separated model, adjacent cells each have their own distinct borders (the distance between them given by the border "spacing" property.)

Cells: Sets whether cells with no visible content should have borders or not (only for the "separated borders" model).

Spacing: Sets the distance between the borders of adjacent cells (only for the "separated borders" model).

Caption: Sets the position of the caption according to the table.

Layout: Sets the algorithm used to lay out the table. Using the "automatic" layout algorithm (the table algorithm used by default in most browsers today), all of the table content is required in order to determine the final table layout. For larger quantities of data, this can be much slower than the "fixed" table layout algorithm. However, this algorithm does find sufficient minimum and maximum widths for each column, allowing all content in the table's data cells to be appropriately rendered as specified by the author. Under the "fixed" layout method, the entire table can be rendered once the first table row has been downloaded and analyzed. This can drastically speed up rendering time over the "automatic" layout method, but subsequent cell content may not fit in the column widths provided.The Clip and Overflow properties control the cell appearance in such a case.

Clip: Sets the shape of an element. The element is clipped into this shape, and displayed. By default, the clipping region has the same size and shape as the element's box(es).

Overflow: Sets what happens if the content of an element overflow its area. "visible" The content is not clipped. It renders outside the element. "hidden" The content is clipped, but the browser does not display a scroll-bar to see the rest of the content. "scroll" The content is clipped, but the browser displays a scroll-bar to see the rest of the content and "auto" If the content is clipped, the browser should display a scroll-bar to see the rest of the content.

Box Border...
A shorthand property for setting all of the properties for the four borders in one declaration.
Size (px): Select the size of the borders in pixels.

Style:The border style properties specify the line style of a box's border (solid, double, dashed, etc.). The properties defined in this section refer to the "border-style" value type, which make take one of the following:
"none" No border. This value forces the computed value of 'border-width' to be "0".
"hidden" Same as "none", except in terms of border conflict resolution for table elements.
"dotted" The border is a series of dots.
"dashed" The border is a series of short line segments.
"solid" The border is a single line segment.
"double" The border is two solid lines. The sum of the two lines and the space between them equals the value of "border-width".
"groove" The border looks as though it were carved into the canvas.
"ridge" The opposite of 'grove': the border looks as though it were coming out of the canvas.
"inset" The border makes the entire box look as though it were embedded in the canvas.
"outset" The opposite of 'inset': the border makes the entire box look as though it were coming out of the canvas.
All borders are drawn on top of the box's background. The color of borders drawn for values of "groove", "ridge", "inset", and "outset" depends on the element's "color" property.

Color: Sets the color of all borders.

Left Border - Right Border - Top Border - Bottom Border...
Shorthand properties for setting "Left", "Right", "Top" and "Bottom" borders individually.
Size (px): Select the size of the border in pixels.

Style: See Box Border...Style: above.

Color: Sets the color of the individual border.

Margins - Padding Tab
Left Margin, Right Margin, Top Margin, Bottom margin:
Sets the corresponding margin of an element. These properties control the size of the margin of an element's rendering box. Negative values are allowed. Margins are transparent and the background value of the parent element shines through.
Length: Refers to a fixed value based on the current element's font size.

Percentage: Refers to a percentage of the width of the current element's containing block.

Left Padding, Right padding, Top Padding, Bottom Padding:
These properties controls the size of the corresponding padding of an element's rendering box. Negative values are not allowed.
Length: Refers to a fixed value based on the current element's font size.

Percentage Refers to a percentage of the width of the current element's containing block.


Optimize your meta tags
From the menu go to: Tools > Optimizer...
Quick Edit Enabled...

Once completed it is important to let the world know your web site exist. Major engines primarily utilize meta content as well as body text content to determine ranking position on given keywords. The Alleycode optimizer will insert keyword and description strings as well as track the number of characters entered.

On opening, Optimizer will display existing web site meta content as well as character values. To change and or create content, complete each field and "Insert" accordingly.

NOTE: Numerical windows indicate the total number of characters in either title, description and/or keywords. Numbers will turn red if over allowable character value (average value as per engine rules).

Title tags: By far the most important tag in your web page.
When spidering your site, search engine robots will first go to the <title> tag. The title must be as descriptive as possible and include embedded keywords related to your site product/content. The <title> tag is what a browser will display in its title bar and also what a search engine listing displays on it's first line. (80 Characters Max.)

Example: "The Coffee Shop" is not descriptive enough! You should have:"The Coffee Shop, Columbia, Mocca, Arabica, French Roast and Expresso coffees". Keep your most important keywords at the beginning of the sentence!

Meta Description tags: This tag lets you control what appears as the summary of your web page and will be displayed after the title of your Web site in the index listing (Most search engines). Your Description also supports your Title Keyword tags and Meta Keywords resulting in good search engine placement. Again be very descriptive and include important keyword. You may repeat your title tag keywords (256 Characters Max.).

Meta Keyword tags: Important information which supports your title tags and description tags. This information will not be visible to your visitors but will help with higher search ranking. When choosing your keywords, do so from an outsiders point of view. Try to imagine what keywords a viewer will use to find a site like yours. This also applies to the title tag keywords. And remember DON'T SPAM by placing mass amount of repetitive keywords. Again, keep your most important keywords at the beginning of the string. Maximum acceptable repetition is 7 times.(1024 Characters Max, separated by comas).

To promote your web site to the search engines see: Third Party Apps.


FTP
From the menu go to: File > FTP

FTP is not available unless linked and activated.
To activate your favorite FTP program from the menu go to: Tools > Preferences > Tools > FTP. Click "Browse and Select" to locate the .exe of your chosen software.

Do you need FTP software?... See Third Party Apps.
Need more help?... See FTP tutorial.


Libraries
From the menu go to: View >Libraries Window

Library gives you access to exhaustive HTML3.2, HTML4.1, CSS1, CSS2 and PHP4 tags and functions.

To insert: Place your cursor in your document at the desired point of insertion. Double click your selection from the library window.

NOTE: In the case of HTML tags you can also highlight a word or paragraph and double click your tag selection from the Library window. Alleycode returns the highlighted area contained within the selected opening and closing HTML tags.


Drag and Drop

Drag single or multiple files (multi-select) and Drop in Alleycode's editor.


Preferences

General
  • Browsers
  • Printer
  • FTP

    • Editor
  • Screen Font
  • Syntax Highlighting


File Menu
From the menu go to: File >

  • New >
    • HTML Page
    • Plain Text
    • PHP Script
  • Open Ctrl+O
  • Close Ctrl+F4
  • Save Ctrl+S
  • Save All
  • Save As...
  • Print... Ctrl+P
  • Print Selected...
  • FTP
  • Exit Alt+F4


Edit Menu
From the menu go to: Edit >

  • Undo Ctrl+Z
  • Redo Ctrl+Y
  • Cut Ctrl+X
  • Copy Ctrl+C
  • Paste Ctrl+V
  • Select All Ctrl+A
  • Find Next... Ctrl+F
  • Find Replace... Ctrl+H
  • Select Case
    • Tags to Upper Case
    • Tags to Lower Case
    • All Upper Case
    • All Lower Case
    • Select to Upper Case
    • Select to Lower Case
  • Clear All
  • Resize Indent...
  • WordWrap Ctrl+W


Insert Menu
From the menu go to: Insert >

  • HTML Tags
    • HTML Library
    • Font Sets
    • Break Ctrl+Enter
    • Non Breaking Space Ctrl+Alt+Space
    • Horizontal Rule
    • Bold Ctrl+B
    • Italic Ctrl+I
    • Paragraph
    • Comment
    • Horizontal Align
      • Left Shift+Ctrl+Left Arrow
      • Center Shift+Ctrl+ Down Arrow
      • Right Shift+Ctrl+ Right Arrow
    • Hyperlink
  • PHP Tags
    • PHP Library
    • PHP Scripts
      • PHP Info
      • Array
      • Counter
      • Date
      • Email
      • For Loop
      • Form
      • Length
      • Math
      • Metatags
      • Open/Read
      • Pattern Matching
      • Replace
      • Time
      • Variable
    • PHP Tags
    • if
    • else
    • switch
    • for
    • while
    • include
  • CSS
    • Style Sheet Wizard
    • Remote Link
    • Class Tag
  • Tables
    • Table Wizard Ctrl+Alt+T
    • TR
    • TD
    • TH
    • Vertical Align
      • Top
      • Bottom
      • Middle
      • Baseline
    • Horizontal Align
      • Left
      • Center
      • Right
  • Forms
    • Feedback Form
    • Order Form
    • Survey Form
    • Fieldset Form
    • Form Action
    • Text Field
    • Textarea
    • Dropdown
    • Fieldset
    • Password
    • Radio Button
    • Check Box
    • Submit Button
    • Reset Button
    • Image
    • Browse Button
    • Hidden Field
  • Frames
    • 3 Top
    • 3 Left
    • V2 Left
    • V2 Right
    • H2 Top
    • H2 Bottom
    • Frame Tag
    • No Frames
    • iFrame
    • Base Target
  • List
    • Unordered List
    • Ordered List
    • Add Line
  • Images
  • Color
  • Special Characters


View Menu
From the menu go to: View >

  • Turf View Ctrl+T
  • HTML Toolbar
  • Text Toolbar
  • Synchro View Ctrl+D
  • Preview in Browser
    • Default F11
    • IE F12
    • Netscape
    • Opera
  • Libraries Window Ctrl+L
  • Directory Window


Tools Menu
  • Style Sheet Wizard
  • Optimizer
  • Properties
  • Table Wizard
  • Assignments
  • Preferences


Help Menu
  • Help Topics F1
  • Tutorials
  • Quick Start Tutorial
  • Online Help
  • Support Forum
  • Register Alleycode
  • Unlock Alleycode
  • About Alleycode


Web Site Promotion
As a webmaster you have a responsibility to your client to make sure their Web site is search engine ready. This equally applies if you are designing a Web site for yourself. The following suggestion will help you in this process.
  • Navigation: Make sure it is intuitive and easy to follow. If you are using "Image mapping, Java script or Mouse overs" for navigation you must include a hypertext link navigation footer at the bottom of each page. Failing to do so will stop search engines spider dead in their track at the entrance. Spiders cannot read Image mapping, Java Script nor Mouse over links. They have no way of getting to the other Web pages for indexing and ranking. For example see footer at the bottom of http://www.alleycode.com

  • Frames: Again search engine spiders cannot read frames. You must include <noframes> tags with hyperlink connection to the rest of your Web pages.

  • So... If spiders are lousy readers what are they good for?. Well, they are very good at reading meta content as well as body text content (most spiders). Alleycode includes a very useful "Optimizer" wizard which will help you keep your meta content accurate and search engine friendly. Be sure to optimize each page produced with unique meta content.

  • Size is important: When designing your site you must also keep loading time in mind. Remember that many people still rely on dial-up for Internet connection. What may seem like an instant with ADSL can take 30- 45+ seconds to load on dial-up. Somewhere around 20 seconds you start loosing potential viewers who move on to a faster loading Web site!

  • Test your Web site: One of our favorite site for search engine promotion and Web site testing is Submit Plus at: http://www.submitplus.com . They offer a wide range of free services as well as some paid services. They are well established with a good reputation.


More Tutorials

HTML - CSS:
The most important site for HTML, XML and CSS information... They're the Gatekeeper.
http://www.w3.org/

A great online tutorial with interactive examples. Covers HTML, CSS and XML...
http://www.w3schools.com/

PHP:
The most important site for PHP. Founding fathers...
http://www.php.net/

PHP 101 by Dev Shed... Very good and Fun!
http://devshed.com/Server_Side/PHP/PHP101

Need some good PHP, Perl, ASP and Java scripts scripts and tutorials?... Huge database.
http://hotscripts.com/

See also: Quick Start Tutorial


Third Party Apps
FTP:
WS_FTP Product:
http://www.ipswitch.com

WS_FTP LE (Free)
http://www.ftpplanet.com/download.htm

Browsers:
Internet Explorer:
http://www.microsoft.com/windows/ie/default.asp
default: http://www.microsoft.com

Netscape:
http://channels.netscape.com/ns/browsers/default.jsp
default: http://www.netscape.com/

Opera:
http://www.opera.com/


About Alleycode
From the menu go to: Help > About Alleycode

Version details, copyright notice, a link to our Web site and a cool picture!

Contact: support@alleycode.com
http://www.alleycode.com


Well done... Now hit the back button to return!


Anchor Hyperlink
From the menu go to: Insert > HTML Tags > Hyperlink...

Use Hyperlink to connect your document either locally or externally.

Content:
Highlight existing text you wish to link. If no text exists, enter desired link name in content field. The link will then be inserted at your cursor position.

Route:
Direct (default): Direct link to another document (../website/page.html).
World Wide Web: Link to an HTTP address (http://www.domain.com/).
Email Address: Link to an e-mail address (mailto:email@address.com).
FTP Server: Link to an FTP address (ftp://username:password@ftp.domain.com/).
Newsgroup:Link to a newsgroup (news:alt.groupname).
View Source: Link to an HTTP address and view it's source in default text editor (view-source:http://www.domain.com/).

Target:
_blank loads the linked document in a new, unnamed browser window.
_self loads the linked document in the same frame or window as the link. This target is the default, so you usually don't have to specify it.
_parent loads the linked document in the parent frame or parent window of the frame that contains the link. If the frame containing the link is not nested, then the linked document loads in the full browser window.
_top loads the linked document in the full browser window, thereby removing all frames.

Link:
Enter the access path and the file name. You can also search for the file in your folders by using the Open button.

Click Insert to insert into your document.

Example:
if:
Content = Alleycode
Route = World Wide Web
Target = _blank
Link = (http://)www.alleycode.com

Displays: <a href="http://www.alleycode.com" target="_blank">Alleycode</a>


Bold tag
From the menu go to: Insert > HTMLTags > Bold.
Insert Hint: For non-existing text you can insert any HTML tags at the cursor location. For existing text, highlight the desired text and then insert selected tag.

Converts enclosed content to bold

Example:<b>Some text</b>

Results: Some text

Keyboard shortcut: Ctrl+B


Break Tag
From the menu go to: Insert > HTMLTags > Break.
Insert Hint: For non-existing text you can insert any HTML tags at the cursor location. For existing text, highlight the desired text and then insert selected tag.

The <br> tag inserts a single line break.

Example:This text contains <br> a line break

Results:
This text contains
a line break

Note: Use the
tag to enter blank lines, not to separate paragraphs.

Keyboard shortcut: Ctrl+Enter


Horizontal Alignment
From the menu go to: Insert > HTMLTags > Horizontal Alignment > | Left
 | Center
 | Right

Horizontal attributes can be inserted in most data tags for positioning.

Example:

<p align="center">I am the center</p>

Result:

I am the center


Checkbox
From the menu go to: Insert > Forms > Checkbox

Checkboxes are used when you want the user to select one or more options of a limited number of choices.

<form>
<input type="checkbox" name="cake">
I want a piece of cake<br>
<input type="checkbox" name="chocolate">
I want a piece of chocolate
</form>

Result:

I want a piece of cake
I want a piece of chocolate

See Also: Form Samples


Clear All
From the menu go to: File > Clear All.

Use this command to clear all content of selected document.


Close
From the menu go to: File >Save As...

Select to close a single focused document. If unsaved, you will be prompted to '"Save somename.html?".

NOTE: "Close" is also available by right clicking the editor or active tab.

Keyboard shortcut: Ctrl+F4


Color Picker
From the menu go to: Insert > Colors...

NOTE: Color is inserted in your editor window as a hexadecimal value.

Basic Colors:
Displays selection of standard colors. Click a color to apply it to the selected component.

Custom Colors:
Displays the colors that you have created. You can create custom colors by clicking Define Custom Colors.

Define Custom Colors:
Click Define Custom Colors to expand the Color editor to show options that enable you to create your own colors.

Color field:
Displays the spectrum of available colors. The crosshairs indicate the current color. Click anywhere or drag in the color field to select a color. When you select a color here and then click Add To Custom Color, the selected color is added to one of the Custom Color boxes so you can use it again.

Color|Solid:
Displays the currently selected color and its closest solid color. Double-click the solid color to make it the current color.

Hue:
Enter a value for the hue. Hue is the "actual" color, for example, red, yellow-green, or purple. Hue refers to the color without regard to saturation or brightness (luminosity).

Sat(uration):
Enter a value for the saturation. Saturation refers to how much gray is in the color. The Sat(uration) field shows the saturation from 0 (medium gray) to 240 (pure color).

NOTE: Saturation affects how clear the color is. Luminosity affects how bright the color is.

Lum(inosity) and the Luminosity Slider Control: Enter a value for the luminosity, or drag the pointer on the slide to set the luminosity. Luminosity is the brightness of a color. The Lum(inosity) field shows the luminosity from 0 (black) to 240 (white). The column to the right of the color field shows the range of luminosity for the current color. Slide the arrow to the right of the column up or down to adjust the luminosity. When you change the luminosity, the Red/Green/Blue color values also change.

Red/Green/Blue
Enter values for the proportion of red, green, and blue you want in your color. The values in these fields show the balance of red, green, and blue in the current color. This is sometimes called the RGB color. The range of available values for an RGB color is 0 to 255.

Add To Custom Colors: Click to add the color you have defined to the Custom Color grid on the Color editor.

Click OK to enter your color selection as a hexadecimal value.


Comment Tag
From the menu go to: Insert > HTMLTags > Comment.
Insert Hint: For non-existing text you can insert any HTML tags at the cursor location. For existing text, highlight the desired text and then insert selected tag.

The comment tag is used to insert a comment in the source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.

You can also store program-specific information inside comments. In this case they will not be visible for the user, but they are still available to the program. A good practice is to comment the text inside the script and style elements to prevent older browsers, that do not support scripting or styles, from showing it as plain text.

<!-- This text is a comment -->


Copy
From the menu go to: Edit > Copy.

Use this command to copy selected text onto the clipboard. This command is unavailable if there is no text currently selected.

Copying text to the clipboard replaces the contents previously stored there.

Keyboard shortcut: Ctrl+C


CSS Class Selector
From the menu go to: Insert > CSS > Class Selector.

When a style sheet is created a method is needed to connect style statements to items in the document. The class selector matches the value of the HTML "CLASS" attribute. It is referenced by preceding the value with a period character ("."). NOTE: Do not included the period character (".") in the class tag!

Example:

<html>
<head>
<title> CSS Class Selector </title>
<style type="text/css">
<!--
.testfont { font-family: Arial, Verdana; font-size:12px; }
-->
</style>
</head>

<body bgcolor="#FFFFFF">

<table width="60%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class=" testfontt">All content in this cell will reflect the .testfont class.</td>
</tr>
</table>

</body>
</html>


CSS Link tag
From the menu go to: Insert > CSS > Remote Link.

The "The <link> tag allows you to use one style sheet for all HTML documents. The <link> tag is inserted inside the head section

Example:

<html>
<head>
<title> Your Title Here </title>
<link rel="stylesheet" type="text/css" href="style.css">"
</head>

<body>

</body>
</html>


Cut
From the menu go to: Edit > Cut.

Use this command to remove currently selected text from the document and put it on the clipboard. This command is unavailable if there is no text currently selected.

Cutting text to the clipboard replaces the contents previously stored there.

Keyboard shortcut: Ctrl+X


Exit
Use this command to close Alleycode. If any open documents are modified you will be prompted to save them accordingly.

Keyboard shortcut: Alt+F4


Fieldset Tags
From the menu go to: Insert > Forms > Fieldset

Use Fieldset to draw a border with a caption around your data.

Example:

<fieldsett>
<legend>
Who are you?:
</legend>
<form>
First Name: <input type="text">
Last Name: <input type="text">
</form>
</fieldset>

Result:

Who are you?:
First Name:
Last Name:

See Also: Form Samples


File
From the menu go to: File >

  • New
    • HTML Page
    • Plain Text
    • PHP Script
  • Open Ctrl+O
  • Close Ctrl+F4
  • Save Ctrl+S
  • Save All
  • Save As...
  • Print... Ctrl+P
  • Print Selected...
  • FTP
  • Exit Alt+F4


Find Next
From the menu go to: Edit > Find Next....

Use this command to search for specific text in current document. This command will also search for the next occurrence of the same text.

Keyboard shortcut: Ctrl+F


Find and Replace
From the menu go to: Edit > Find and Replace....

Use this command to search specific text in current document and replace it with different text.

Options are:
1) Replace a single instance.
2) Replace all instances.
3) Match whole word only.
4) Match case

Keyboard shortcut: Ctrl+H


HTML Font Styles
From the menu go to: Insert > HTMLTags > Font Sets.
Insert Hint: For non-existing text you can insert any HTML tags at the cursor location. For existing text, highlight the desired text and then insert selected tag (HTML 3.2 only).

HTML font sets determines the style output of your text in a browser.Alleycode displays a drop box with the following options:

Set HTML 3.2:
Use if designing or updating HTML 3.2 code.
input: <font face="" size="" color=""></font>
NOTE: The <font> tag in HTML4.0 is deprecated. It is supposed to be removed in a future version of HTML. Even if a lot of people are using it, you should try to avoid it, and use styles instead.

Set HTML 4.0:
Use if designing or updating HTML 4.0 code.
NOTE: Set HTML 4.0 is an Inline Style which defines the font face, font size, and font color of text. Place you cursor in selected tag prior to inserting Inline Style.
input: style="font-family:; font-size:; color:;"

Drop down combination box displays the following:
Font Family:
Displays available fonts on your system. Valid for both HTML3.2 and HTML4.0. Place you cursor at either font face=| or style=font-family:|; . Select your font to insert.

Font Size 3.2:
Use with Set HTML 3.2. Defines font sizes from 2- 6. Place you cursor at size=|. Select value to insert.

Font Size 4.0:
Use with Set HTML 4.0. Defines font size in percentage. Place your cursor at font-size:|; Select value to insert.


Form Action
From the menu go to: Insert > Forms > Form Action.

When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute defines the name of the file to send the content to.

<form method="post" action="yourscript.php"></form>

You can handle many form-processing tasks using client-side scripting. For such purposes you need a server-side application such as a Common Gateway Interface (CGI) script. CGI scripts can be written in PHP, Perl, C, Java, or other programming languages. There are several sites on the Web that offer free CGI scripts that you can use (see Tutorials). You can modify those scripts to fit your needs. You can also ask your Internet service provider or Web team if there are any available CGI scripts that are already configured to run on your server.

For a PHP form/action example, from the menu go to: Insert > PHP Tags > PHP Scripts > Form. Left click to open. PHP must be installed on your server or system for functionality. See also: What's PHP?


Browse Button
From the menu go to: Insert > Forms >Browse Button

This control type allows the user to select files so that their contents may be submitted with a form.

<form method="post" action="">
<input type="file" name="">
</form>

Result:

See Also: Form Samples


Image Field
From the menu go to: Insert > Forms >Image

Use "Images" input instead of standard button to activate command.

Example:

<form method="post" action="actiontest.htm">
Your Name:<input type="text" name="name">
<input type="image" src="alleystar.bmp">
</form>

Result:

Your Name:

See Also: Form Samples


Form Samples
From the menu go to: Insert > Forms > | Feedback Form
 | Order Form
 | Survey Form
 | Fieldset Form

Examples are basic form layouts and can easily be customized to suit your needs. Place your cursor in an new/opened html page at a desired location. Select and left click to insert.

NOTE: The form's action attribute must be implemented in order to send the collected input to a given destination. For a PHP example, from the menu go to: Insert > PHP Tags > PHP Scripts > Form. Left click to open. PHP must be installed on your server or system for functionality. See also: What's PHP?


Select drop-down box
From the menu go to: Insert > Forms > Drop-down

This tag allows the user to choose from a fixed set of values; one or several at once. The <select> tag has Options in between the initiating <select> tag and the terminating tag.

The attributes to Select are as follow:
Name is the symbolic name for this Select element. This must be present, as it is used when putting together the query string for the submitted form.
Size: if size is 1 or if the size attribute is missing, by default the Select will be represented as an option menu. If size is 2 or more, the Select will be represented as a scrolled list; the value of size then determines how many items will be visible.
Multiple, if present (no value), specifies that the Select should allow multiple selections. The presence of Multiple forces the Select to be represented as a scrolled list, regardless of the value of Size.

The attributes to Option are as follow:
Selected: specifies that this option is selected by default. If the Select allows multiple selections (via the Multiple attribute), multiple options can be specified as selected.

Example:

<form method="post" action="yourscript.php">
<select name="dogs">
<option value="poodle">poodle
<option value="shepherd">shepherd
<option value="labrador" selected>labrador
<option value="terrier">terrier
</select>
</form>

Result:

See Also: Form Samples


Text Field
From the menu go to: Insert > Forms > Text Field.

Text Field assigns a name to the field. Every text field must have a unique name.

Example:

<form method="post" action="yourscript.php">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Your Name:</td>
<td><input type="text" name="name"></td>
</tr>
</table>
</form>

Result:

Your Name:

For a PHP form/action example, from the menu go to: Insert > PHP Tags > PHP Scripts > Form. Left click to open. PHP must be installed on your server or system for functionality. See also: What's PHP?
See Also: Form Samples


Frameset
From the menu go to: Insert > Frames > | 3 Top
 | 3 Left
 | V2 Left
 | V2 Right
 | H2 Top
 | H2 Bottom
 | Frame Tag
 | No Frames
 | iFrame
 | Base Target

Frames are used in a Web page to divide it into multiple HTML pages. For example, (3 Top below) generates a page which consists of three frames. One thin frame on the side that contains a scrolling menu, one frame that runs along the top that contains the logo and title of the Web site, and one large frame that takes up the rest of the page and contains the main content. Each of these frames is an independent HTML page. They all work together on the page through the use of one or more framesets, which is an HTML page that defines the structure and properties for the Web page, including information about the number of frames displayed on a page, the size of the frames, the source of the page loaded into a frame, and other definable properties. The frameset page isn't displayed in a browser; it simply stores information about how the frames on a page will display

3 Top, [image] 3 Left, [image] V2 Left, [image] V2 Right, [image] H2 Top, [image] H2 Bottom:
The above define 6 popular frameset arrangements. Alleycode automatically includes <noframes> tags when using these pre-defined framesets.

Frame Tag:
The <frameset> tag defines how to divide the window into frames Each frameset defines a set of rows or columns The values of the rows/columns indicate the amount of screen area each row/column will occupy.

No Frames:
Defines a noframes section for browsers that do not handle frames.

iFrames:
Defines an inline sub window (frame).

Base Target:
The base element specifies a base URL for all the links in a page.
NOTE: The tag must go inside the head element.


FTP Tutorial
Uploading your new pages to the Internet!

What is FTP?

FTP stands for "File Transfer Protocol". Put simply, FTP is another piece of software that allows you to use the Internet to download or upload files from one computer to another. In this case, transferring your web page to your Remote Host Web Server (ISP) and then keeping it updated. In order to make this happen you need FTP software and you need to know the "name" or address of your directory on your Web Server plus your User Name and Password.

FTP Tools

Do you need Software? See Third Party Apps.

Basically there are three steps to follow:
Building a "Session Profile".
Making the Connection.
Transferring the Files.

1. Building a "Session Profile".

WS_FTP

A session profile allows you to store information about a specific FTP server you are using. This includes its "address", your userID on the system, your password and (optionally) start-up directories on both your machine and the FTP server. As in a Phonebook, each entry can have its own name which you apply. Make a new entry and give it any name (e.g. "My Web Site").

Under Host Name: enter the name or IP number of the server you are wanting to upload to. e.g. www.myserver.com or ftp.myserver.com .Or if you have your own domain, enter www.mydomain.com or ftp.mydomain.com.

Under Host Type: select Automatic detect, which takes care of about 90% of all hosts.

Under User ID: enter your userID given to you by your ISP (Often it is the same UserID as your dial-up account).

Under Password: type in the password you use to login to your dial-up account (Again this is the norm, if not check with your ISP). Note that this comes up in "protected" text. Check the Save Password box if your machine is fairly secure. If it's not secure then you can type in the password here each time you use this service or wait until you are asked for a password.

In most cases, you can leave the other boxes empty. The FTP Servers will automatically place you in the right directory.

2. Making The Connection

You only need to do step 1 once. The next time you call up your FTP tool, the "Session Profile" for "My Web Site" is there and just needs to be selected.

Once you are satisfied you have entered the correct information, Click "Apply" and then "OK". If you are not connected, you should be taken through the dial-up steps. You can also connect prior to starting an FTP session.

3. Transferring Files

Once you see the Directory and files on the FTP Server, you know you are connected.

There are two kinds of file transfer, ASCII and Binary. ASCII is for text and Binary is for graphics. As a rule Choose Binary as it will handle both HTML and graphics.

There are two arrows, which indicate the direction of the file transfer. Note that these actions are irreversible. Once you transfer a file, it overwrites any file it finds with the same name and does not ask you if you want to do this. So be careful to pick the right direction if you've been updating files on the client machine. Also note that most web-servers run on Unix, which is case sensitive. This is the opposite of most desktop environments. What this means is that if you refer to a file in your HTML called "Example.html", but the file is actually named "example.html", it will work just fine locally but will not work correctly once uploaded.

You're done... Open your browser, locate your file (refresh if it was an update) and make sure your changes loaded correctly.


Help - Content - Index
Use this command to display the opening screen of Help. From the opening screen, you can use the directory tree structure to the appropriate topic for detailed instructions.

Use the index tab to locate a topic by category...
Use the search tab to perform a full keyword search...

Keyboard shortcut: F1


Hidden Field
From the menu go to: Insert > Forms >Hidden Field

The hidden field creates controls that are not rendered but whose values are submitted with a form. You use this control type to store information between client/server exchanges that would otherwise be lost due to the stateless nature of HTTP. The INPUT element is used to create a hidden control.

Example:

<input type="hidden" name="FirstName" value="Roger">

See Also: Form Samples


Horizontal Rule
From the menu go to: Insert > HTMLTags > Horizontal Rule.
Insert Hint: For non-existing text you can insert any HTML tags at the cursor location. For existing text, highlight the desired text and then insert selected tag.

In HTML the <hr> tag has no end tag.

Example: This is some text <hr>

Result:This is some text


HTML Toolbar command
Use this command to switch to the HTML toolbar. This toolbar gives you access to Common HTML tag inserts, document Optimizer, document Properties, Table Wizard, Forms, CSS Wizard and PHP quick inserts.

See also: HTML Toolbar


Insert Images
From the menu go to: Insert > Images...

Alleycode displays the File Open Image dialog box.
Place your cursor in the desired position to insert an image.

Search your system for desired image. In the Preview window, you will see the image you have chosen. If satisfied with selection click "Open".

NOTE: Image insert detects new or saved (as well as modified) documents and creates a system path accordingly. New doc creates a path to your drive root while saved doc creates a relative path to the Web site in progress. ie: c:\websites\alleycode\images\somepic.gif inserts src="images/somepic.gif"... Upload ready!

Alleycode supports most popular graphic formats.


Italic Tag
From the menu go to: Insert > HTMLTags > Italic.
Insert Hint: For non-existing text you can insert any HTML tags at the cursor location. For existing text, highlight the desired text and then insert selected tag.

Converts selected text to italic.

Example: <i>Some Text</i>

Results: Some Text


List Tag
From the menu go to: Insert > List > | Unordered
 | Ordered
 | Add Line

Insert Hint: For non-existing text you can insert any HTML tags at the cursor location. For existing text, highlight the desired text and then insert selected tag.

The <li> tag defines the start of a list item. The <li> tag is used in both ordered (<ol>) and unordered lists (<ul>).

Unordered list:
Example:
<ul>
<li>Web site</li>
<li>Editor</li>
</ul>
Results:
  • Web site
  • Editor
Ordered List:
Example:
<ol>
<li>Web site</li>
<li>Editor</li>
</ol>
Results:
  1. Web site
  2. Editor
Add line:
Adds lines <li>new line</li> to both unordered and ordered lists.


Non Breaking Space
From the menu go to: Insert > HTMLTags > Non Breaking Space.
Insert Hint: For non-existing text you can insert any HTML tags at the cursor location. For existing text, highlight the desired text and then insert selected tag.

The most common character entity in HTML is the non-breaking space.

Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9 of them. To add spaces to your text, use the &nbsp; character entity.


New
From the menu go to: File > New >

Use this command to create a new document in Alleycode. Select the appropriate document type in the popup menu.

Choose between:
HTML Page
Plain Text
PHP script

A basic starter page will open accordingly.


Open
From the menu go to: File > Open...

Use this command to open an existing document in a new window.

Alleycode displays the File Open dialog box so you can choose documents to edit. You can open multiple documents at once.

To open multiple documents:
1) Click “File” > “Open”
2) “Open dialogue box” opens.
3) Select (highlight) file to open. Don’t double click or click on open at this point.
4) Hold CTRL key down and click on every file to open.
5) When every file to open is selected, click “Open”.

Keyboard shortcut: Ctrl+ O


Paragraph Tag
From the menu go to: Insert > HTMLTags > Paragraph.
Insert Hint: For non-existing text you can insert any HTML tags at the cursor location. For existing text, highlight the desired text and then insert selected tag.

The <p> tag defines a paragraph.


Password Field
From the menu go to: Insert > Forms > Password

Use to create a password field on a HTML page. When you type characters in a password field, the browser displays asterisks or bullets instead of the characters.

Example:

<form>
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>

Result:
Username:
Password:

See Also: Form Samples


Paste
From the menu go to: Edit > Paste.

Use this command to insert a copy of the clipboard contents at the insertion point. This command is unavailable if the clipboard is empty.

Keyboard shortcut: Ctrl+V


PHP else statement
From the menu go to: Insert > PHP Tags >else.

else works in conjunction with the if statement. Basically the if part checks for a condition. If it is true, the then statement is executed. If not, the else statement is executed.

Example:

<?php
if ( weather == rain){
echo "take umbrella";
} else {
echo "take sun screen";
}
?>

See also:
What is PHP?
Tutorials


PHP for loop
From the menu go to: Insert > PHP Tags >for.

The for loop is useful when you have to have the same task repeated a number of times. The for loop works by first initializing a variable, then do a test. If it is true, the code is executed. This will increment the variable and then execute the main-code again. The process is repeated until a particular condition is satisfied. It's called the condition of escape (or exit condition) for the loop.

Example:

<?php
for($i = 1; $i < 11; ++$i){
echo "$i<br>";
}
?>

See also:
What is PHP?
Tutorials


PHP if statement
From the menu go to: Insert > PHP Tags >if.

If statements are used to compare two values and carry out different actions based on the results of the test. If statements take the form if, then, else. Basically the if part checks for a condition. If it is true, the then statement is executed. If not, the else statement is executed.

Example:

<?php
if (weather == rain){
echo "take umbrella";
} else {
echo "take sun screen";
}
?>

See also:
What is PHP?
Tutorials


PHP Include Function
From the menu go to: Insert > PHP Tags >Include.

The include() function allows you to access an external file of code inside your application. Using includes() is a great way to break your site into more manageable files and to also change values across your entire site using variables. For example, a repetitive header... Changing one file updates your entire Web site!

Example, a simple navigation system:

navigate.inc
<p>
<u>Navigate</u><br>
<a href="page1.htm">Page1</a><br>
<a href="page2.htm">Page2</a><br>
<a href="page3.htm">Page3</a><br>
<a href="page4.htm">Page4</a><br>
</p>

yourpage.htm
<html>
<head>
<title> PHP Include() example </title>
<meta name="Generator" content="AlleyCode">
</head>

<body>

<table width="100%" border="1" cellspacing="4" cellpadding="4">
<tr>
<td width="100"><? include "$DOCUMENT_ROOT/include/navigate.inc"; ?></td>
<td>Body content of your web site</td>
</tr>
</table>

</body>
</html>

Results:

Navigate
Page1
Page2
Page3
Page4

 Body content of your web site

See also:
What is PHP?
Tutorials


PHP Samples
From the menu go to: Insert > PHP Tags >PHP Scripts > | PHP Info
 | Array
 | Counter
 | Date
 | Email
 | For Loop
 | Form
 | Lenght
 | Math
 | Metatags
 | Open/Read
 | Pattern Matching
 | Replace
 | Time
 | Variable

A selection of fully functional but very basic PHP scripts. To learn more about PHP go to: What is PHP? and Tutorials.


PHP switch statement
From the menu go to: Insert > PHP Tags >switch.

if you are using string queries (e.g. index.php?i=2) and or if you are using a very large if statement, using the switch statement makes for easier and more efficient coding.

Example:

<?php
switch ($i) {
case 0:
echo "i equals 0";
break;
case 1:
echo "i equals 1";
break;
case 2:
echo "i equals 2";
break;
default: // If nothing matches above
echo "well...nothing matches.";
}
?>

See also:
What is PHP?
Tutorials


PHP Tags
From the menu go to: Insert > PHP Tags >PHP Tags.

PHP scripts are always enclosed in between two PHP tags. This tells your server to parse the information between them as PHP.

Example:

<?php
Your code here
?>

NOTE: Other acceptable PHP tags are:

<?
Your code here
php?>

<script language="php">
Your code here
</script>

See also:
What is PHP?
Tutorials


What is PHP?

PHP is a widely-used general-purpose scripting language that is especially suited for Web development and can be embedded into HTML.

To learn more about PHP go to: Tutorials.


PHP while loop
From the menu go to: Insert > PHP Tags >while.

A while loop will, as the name suggests, execute a piece of code until a certain condition is met. For instance if you wanted to print out the string "Alleycode Rocks!" 5 times you could use the following code:

Example:

<?php
$times = 5;
$x = 0;
while ($x < $times) {
echo "Alleycode Rocks!";
++$x;
}
?>

See also:
What is PHP?
Tutorials


Browsers Selection
Preferences: Content Index

NOTE: Alternative browsers must be installed on your system prior to selection. If checked, browser will be available from menu View > Browsers.

To download additional browsers see: Third Party Apps.


Editor
Preferences: Content Index

HTML Tags in Uppercase:
Will insert all tags (keyword and attribute) in upper case. Single document conversion is available in menu Edit > Select Case.

Show Line Numbers:
Select to show left gutter and line numbers in opened document. Alleycode allows you to place bookmarks in the gutter for easy reference. Use Shift+Ctrl+0..9 key combination inside the code editor (place your cursor at desired line), and to jump from any point to one of the bookmarks using Ctrl+0..9.

Apply WordWrap:
Automatically wraps a sentence at the end of your working window.

Editor XP (flat) style (must restart Alleycode).
Variation on Alleycode's editor visual appearance... Breaks the monotony of a always having the same look!

Tab:
Specify the tab size.

Indent:
Specify the indent size.

Enabled Auto Indent:
Check "Enable Auto Indent " to follow the same indent size at line wrap.


Screen Font
Preferences: Content Index

Font:
This window displays font names which are available on your system. Selected font will display in open documents.

Size:
Select the size of the font.

Style:
Check appropriate option... Bold = Bold and/or Italic = Italic.

Editor Display:
Will preview the above changes live. When you are satisfied with your selection click Apply! to convert opened document. Finally click OK! the make the changes permanent.


FTP
Preferences: Content Index

To activate your favorite FTP. In you Preferences >General > FTP page click "Browse and Select". Locate the .exe of your chosen software and click "Open". Click OK to close and save.

Do you need FTP software?... See Third Party Apps.


General
Preferences: Content Index

Start Up:
Select "Display File Manager" to open automatically on start up. You can also select Directory assignments at:

Opening Mode:
Select "Text Mode" or "HTML Mode" or "Turf Mode" to open automatically on start up.

Synchro View:
Select to display Viewer at the top (default is bottom).


Printer
Preferences: Content Index

Line Numbers:
Select to print line number (not page number).

Plain Text:
Select for text only (no color).

WordWrap:
Select to automatically wrap a line at the end of page length. Not selected will truncate all lines beyond page length.

Line Spacing:
Numerically select space between each line (inches).

Margins:
Numerically select Top, Left, Right and Bottom margin distance from the edge of your page.


Syntax Highlighting
Preferences: Content Index

XML Highlighting On (HTML Color Code):
Select to allow parsing of XML code. Highlighting is based on HTML color code.

Bold Tags On:
Select to applied bold weight to "Keyword" (HTML) and "Keyword - Variable - Function" (PHP) tags. See HTML - PHP Tabs below.
NOTE: Bold weight should not be used with "Fixedsys" screen font. It just looks odd!

HTML - PHP Tabs:
  1. Select HTML or PHP tab:
  2. From the "Dropdown" menu select the appropriate tag you wish to color.
  3. Select a color from the grid option.
  4. Your tag selection and color selection renders in the "Syntax Highlight sample window".
  5. If satisfied click OK to implement.


Print
From the menu go to: File > Print...

Use this command to print a document. Printing preferences can be set from menu go to: Tools > Preferences... In Preferences go to: General > Printer.

Keyboard shortcut: Ctrl+P


Print Selected
From the menu go to: File > Print Selected...

Use this command to print a "highlighted" portion of your document. Printing preferences can be set from menu go to: Tools > Preferences... In Preferences go to: General > Printer.


Page Properties
From the menu go to: Tools > Properties...
Quick Edit Enabled...

Bg Image and Bg Color specify a background image and background color for the page.

Text Color and Links define default colors for Text Color, Links, Visited Links, and Active Links. If left blank default browser colors will apply. See also: Color Picker. You can also control colors using CSS style sheets; see: CSS Wizard.

Left Margin and Top Margin specify the sizes of page margins in the body tag, for Microsoft Internet Explorer only. Netscape Navigator ignores these values, using Margin Width and Margin Height instead. For best cross-browser results, provide margin values for both browsers instead of just one browser; fill in all four margin values instead of just two. To ensure that no margins appear in either browser, set all four values to 0.

Margin Width and Margin Height specify the sizes of page margins in the body tag, for Netscape Navigator only. Internet Explorer ignores these values, using Left Margin and Top Margin instead. For best cross-browser results, provide margin values for both browsers instead of just one browser; fill in all four margin values instead of just two. To ensure no margins in both browsers, set all four values to 0.

Document Encoding specifies the encoding used for characters in the document. For English and Western European languages, choose Western. Additional options include Central European, Cyrillic, Greek, Icelandic, Japanese, Traditional Chinese, Simplified Chinese, and Korean. If an option for the encoding you want is not available, choose Other to create a document with the encoding your operating system is using.


Radio Button
From the menu go to: Insert > Forms > Radio Button

Radio Buttons are used when you want the user to select one of a limited number of choices.

Example:

<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>

Result:

Male
Female

See Also: Form Samples


Redo
From the menu go to: Edit > Redo

Use this command to reverse the last undo action. This command is unavailable if there is no undo action done.

Keyboard shortcut: Ctrl+Y


Reset Button
From the menu go to: Insert > Forms >Reset Button

When activated, a reset button resets all controls to their initial values.

Example:

 <form method="post" action="">
Enter some text:<input type="text" name="content">
<input type="reset">
</form>

Result:
Enter some text in the below field and click reset...

Enter some text:

See Also: Form Samples


Resize Indent
From the menu go to: File > Resize Indent.

Opens a +- dialog box which allows you to change the indent for selected document. Altered indentation only applies to Alleycode tags.


Save
From the menu go to: File > Save.

Use this command to save the active document to its current name and directory.

When you save a document for the first time, Alleycode displays the Save As dialog box so you can name your document. If you want to change the name and directory of an existing document before you save it, choose the Save As command.

Keyboard shortcut: Ctrl+S


Save All
From the menu go to: File > Save All.

Use this command to save all open documents to their current filename and directory.

This command will automatically give you the option to save Untitled documents.


Save As
From the menu go to: File >Save As...

Use this command to save and name the active document. Alleycode displays the "Save As" dialog box so you can name your document.


Select All
From the menu go to: Edit > Select All.

Use this command to select the entire document.

Keyboard shortcut: Ctrl+A


Select Case
From the menu go to: Edit > Select Case > | Tags to Upper Case
 | Tags to Lower Case
 | All Upper Case
 | All Lower Case
 | Select to Upper Case
 | Select to Lower Case

Tags to Upper Case:
Select this command to convert all HTML Tags to upper case.

Tags to Lower Case:
Select this command to convert all HTML Tags to lower case.

All Upper Case:
Select this command to convert "complete" document to upper case.

All Lower Case:
Select this command to convert "complete" document to lower case.

Select to Upper Case:
Select this command to convert selected (highlighted) area to upper case.

Select to Lower Case:
Select this command to convert selected (highlighted) area to lower case.


Special Characters
From the menu go to: Insert > Special Characters.

Selecting "Special Characters" opens your library window with a graphical display of special characters at the bottom. Place your cursor where you need your special character and double click a graphical character to insert.


Submit Button
From the menu go to: Insert > Forms > Submit Button

When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.

Example:

<form method="post" action="actiontest.htm">
Your Name:&nbsp;<input type="text" name="name">
<input type="submit" value="Submit your name!">
</form>

Result:

Your Name:

NOTE: If you omit a submit "value=" the default button wording is "Submit".

See Also: Form Samples


Table Alignment
From the menu go to: Insert > Tables > | Vertical Alignment >
 | Horizontal Alignment>

Use the vertical alignment attribute for data cell content vertical positioning.
Options are:
Top
Middle
Bottom
Baseline

Most tags support the horizontal alignment attribute. Use to center tag content
Options are:
Left
Center
Right


Table Data
From the menu go to: Insert > Tables > TD
Quick Edit Enabled...

Defines a table cell <td></td> . Use to add a data cell to an existing Table. To create a complete table see: Table Wizard

Width:
Specifies the width of the table cell. Deprecated in HTML 4.0. Use styles instead. See CSS Wizard.

Height:
Specifies the height of the table cell. Deprecated in HTML 4.0. Use styles instead. See CSS Wizard.

Col Span:
Indicates the number of columns this cell should span.

Row Span:
Indicates the number of rows this cell should span.

Class: see: CSS Class Selector

Horz. Align:
Specifies the horizontal alignment of cell content

Vert. Align
Specifies the vertical alignment of cell content.


Textarea Field
From the menu go to: Insert > Forms > Textarea.

The Textarea tag can be used to place a multi line text entry field with optional default contents in a fill-out form. The attributes to Textarea are as follows:

name: is the symbolic name of the text entry field.
rows: is the number of rows (vertical height in characters) of the text entry field.
cols: is the number of columns (horizontal width in characters) of the text entry field.
Textarea fields automatically have scrollbars; any amount of text can be entered in them. The Textarea element requires both an opening and a closing tag.

Example:

<form method="post" action="yourscript.php">
<textarea name="name" rows="6" cols="30">
Alleycode is a breeze.
</textarea>
</form>

Produces:

See Also: Form Samples


Table Header
From the menu go to: Insert > Tables > TH

Select table header <td> to format the selected cells or rows as a table header. The contents of table header cells are bold and centered by default. TH is a stand alone tag which is not part of Table Wizard generation.

See also: Table Wizard


Table Row
From the menu go to: Insert > Tables > TR
Quick Edit Enabled...

Defines a table row <tr> . Use to add a table row to an existing Table. To create a complete table see: Table Wizard

Horz. Align:
Defines the text alignment in cells.

Vert. Align:
Specifies the vertical text alignment in cells.


Turf Code functions


Turf Edit functions


 <html>
<head>
<title> Easy Web site </title>
<meta name="Generator" content="AlleyCode">
<meta name="Description" content="Your description here...">
<meta name="Keywords" content="Your keywords here...">
</head>
<body bgcolor="#FFFFFF">

<table width="80%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td></td>
<td></td>
</tr>
</table>

</body>
</html>


 <html>
<head>
<title> Easy Web site </title>
<meta name="Generator" content="AlleyCode">
<meta name="Description" content="Your description here...">
<meta name="Keywords" content="Your keywords here...">
</head>

<body bgcolor="#FFFFFF">

<table width="80%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="179"><img src="images/easylogo.gif" width="179" height="63" border="0" alt=""></td>
<td background="images/easybckgrd.gif"> </td>
</tr>
</table>

<table width="80%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

</body>
</html>


 <html>
<head>
<title> Easy Web site </title>
<meta name="Generator" content="AlleyCode">
<meta name="Description" content="Your description here...">
<meta name="Keywords" content="Your keywords here...">
</head>

<body bgcolor="#FFFFFF">

<table width="80%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="179"><img src="images/easylogo.gif" width="179" height="63" border="0" alt=""></td>
<td background="images/easybckgrd.gif"> </td>
</tr>
</table>

<table width="80%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td><a href="index.html">&nbsp;Home&nbsp;</a></td>
<td><a href="about.html">&nbsp;About&nbsp;</a></td>
<td><a href="specials.html">&nbsp;Specials&nbsp;</a></td>
<td><a href="sitemap.html">&nbsp;Sitemap&nbsp;</a></td>
<td><a href="contact.html">&nbsp;Contact&nbsp;</a></td>
<td width="60%">&nbsp;</td>
</tr>
</table>

</body>
</html>


 <html>
<head>
<title> Easy Web site </title>
<meta name="Generator" content="AlleyCode">
<meta name="Description" content="Your description here...">
<meta name="Keywords" content="Your keywords here...">
<style type="text/css">
<!--
.menu { font-family: Arial; font-size:12px; font-weight:bold; color: #FFFFFF; background: #e9924c; }
.menu A:link { font-family: Arial; font-size:12px; text-decoration:none; color: #FFFFFF; }
.menu A:visited { font-family: Arial; font-size:12px; text-decoration:none; color: #FFFFFF; }
.menu A:hover { font-family: Arial; font-size:12px; font-weight:bold; color: #000000; background: #fbf3e1; }
.tableborder { border: 1px solid #e9924c; }
.tdborder { border-right: 1px solid #e9924c; }
-->
</style>
</head>

<body bgcolor="#FFFFFF">

<table width="80%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="179"><img src="images/easylogo.gif" width="179" height="63" border="0" alt=""></td>
<td background="images/easybckgrd.gif"> </td>
</tr>
</table>

<table width="80%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td><a href="index.html">&nbsp;Home&nbsp;</a></td>
<td><a href="about.html">&nbsp;About&nbsp;</a></td>
<td><a href="specials.html">&nbsp;Specials&nbsp;</a></td>
<td><a href="sitemap.html">&nbsp;Sitemap&nbsp;</a></td>
<td><a href="contact.html">&nbsp;Contact&nbsp;</a></td>
<td width="60%">&nbsp;</td>
</tr>
</table>

<table width="80%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="150" bgcolor="#FBF3E1">&nbsp;</td>
<td></td>
</tr>
</table>

</body>
</html>


 <html>
<head>
<title> Easy Web site </title>
<meta name="Generator" content="AlleyCode">
<meta name="Description" content="Your description here...">
<meta name="Keywords" content="Your keywords here...">
<style type="text/css">
<!--
.menu { font-family: Arial; font-size:12px; font-weight:bold; color: #FFFFFF; background: #e9924c; }
.menu A:link { font-family: Arial; font-size:12px; text-decoration:none; color: #FFFFFF; }
.menu A:visited { font-family: Arial; font-size:12px; text-decoration:none; color: #FFFFFF; }
.menu A:hover { font-family: Arial; font-size:12px; font-weight:bold; color: #000000; background: #fbf3e1; }
.tableborder { border: 1px solid #e9924c; }
.tdborder { border-right: 1px solid #e9924c; }
-->
</style>
</head>

<body bgcolor="#FFFFFF">

<table width="80%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="179"><img src="images/easylogo.gif" width="179" height="63" border="0" alt=""></td>
<td background="images/easybckgrd.gif"> </td>
</tr>
</table>

<table width="80%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="menu"><a href="index.html">&nbsp;Home&nbsp;</a></td>
<td class="menu"><a href="about.html">&nbsp;About&nbsp;</a></td>
<td class="menu"><a href="specials.html">&nbsp;Specials&nbsp;</a></td>
<td class="menu"><a href="sitemap.html">&nbsp;Sitemap&nbsp;</a></td>
<td class="menu"><a href="contact.html">&nbsp;Contact&nbsp;</a></td>
<td width="60%">&nbsp;</td>
</tr>
</table>

<table class="tableborder" width="80%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="tdborder" width="150" bgcolor="#FBF3E1">&nbsp;</td>
<td></td>
</tr>
</table>

</body>
</html>


 <html>
<head>
<title> Easy Web site </title>
<meta name="Generator" content="AlleyCode">
<meta name="Description" content="Your description here...">
<meta name="Keywords" content="Your keywords here...">
<style type="text/css">
<!--
.menu { font-family: Arial; font-size:12px; font-weight:bold; color: #FFFFFF; background: #e9924c; }
.menu A:link { font-family: Arial; font-size:12px; text-decoration:none; color: #FFFFFF; }
.menu A:visited { font-family: Arial; font-size:12px; text-decoration:none; color: #FFFFFF; }
.menu A:hover { font-family: Arial; font-size:12px; font-weight:bold; color: #000000; background: #fbf3e1; }
.tableborder { border: 1px solid #e9924c; }
.tdborder { border-right: 1px solid #e9924c; }
-->
</style>
</head>

<body bgcolor="#FFFFFF">

<table width="80%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="179"><img src="images/easylogo.gif" width="179" height="63" border="0" alt=""></td>
<td background="images/easybckgrd.gif"> </td>
</tr>
</table>

<table width="80%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="menu"><a href="index.html">&nbsp;Home&nbsp;</a></td>
<td class="menu"><a href="about.html">&nbsp;About&nbsp;</a></td>
<td class="menu"><a href="specials.html">&nbsp;Specials&nbsp;</a></td>
<td class="menu"><a href="sitemap.html">&nbsp;Sitemap&nbsp;</a></td>
<td class="menu"><a href="contact.html">&nbsp;Contact&nbsp;</a></td>
<td width="60%">&nbsp;</td>
</tr>
</table>

<table class="tableborder" width="80%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="tdborder" width="150" bgcolor="#FBF3E1">&nbsp;</td>
<td>
<table width="90%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="60%"><br><br><p>blablabla blabla blab lablabla bla bla blablab WOW look at the space cadet blablab lablablabla bla bla bla blablablabla blabla bla blablabla blablabla blabla blab lablabla bla bla blablab l ablablab lablablabla bla bla bla blablablabla blabla bla blablabla blablabla blabla blab lablabla bla bla blablab l a b lablab lablablabla bla bla bla blablablabla blabla bla blablabla blablabla blabla blab lablabla bla bla blablab l a b lablab lablablabla bla bla bla blablablabla blabla bla blablabla blablabla blabla</p>

<p>blablabla blabla blab lablabla bla bla blablab WOW look at the space cadet blablab lablablabla bla bla bla</p>

<p>blablabla blabla blab lablabla bla bla blablab WOW look at the space cadet blablab lablablabla bla bla bla blablablabla blabla bla blablabla blablabla blabla blab lablabla bla bla blablab la bablab lablablabla bla bla bla blablablabla blabla bla blablabla blablabla blabla blab lablabla bla bla blablab l a b lablab lablablabla bla bla bla</p><br><br></td>
<td width="40%" align="center"><img src="images/spacecadet.gif" width="143" height="205" border="0" alt="Yes... I could very well be a Space Cadet"></td>
</tr>
</table>
</td>
</tr>
</table>

</body>
</html>


 .menu { font-family: Arial; font-size:12px; font-weight:bold; color: #FFFFFF; background: #e9924c; }
.menu A:link { font-family: Arial; font-size:12px; text-decoration:none; color: #FFFFFF; }
.menu A:visited { font-family: Arial; font-size:12px; text-decoration:none; color: #FFFFFF; }
.menu A:hover { font-family: Arial; font-size:12px; font-weight:bold; color: #000000; background: #fbf3e1; }
.tableborder { border: 1px solid #e9924c; }
.tdborder { border-right: 1px solid #e9924c; }


 <table width="80%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="179"><img src="images/easylogo.gif" width="179" height="63" border="0" alt=""></td>
<td background="images/easybckgrd.gif"> </td>
</tr>
</table>

<table width="80%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr> <td class="menu"><a href="index.html">&nbsp;Home&nbsp;</a></td>
<td class="menu"><a href="about.html">&nbsp;About&nbsp;</a></td>
<td class="menu"><a href="specials.html">&nbsp;Specials&nbsp;</a></td>
<td class="menu"><a href="sitemap.html">&nbsp;Sitemap&nbsp;</a></td>
<td class="menu"><a href="contact.html">&nbsp;Contact&nbsp;</a></td>
<td width="60%">&nbsp;</td>
</tr>
</table>

<table class="tableborder" width="80%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="tdborder" width="150" bgcolor="#FBF3E1">&nbsp;</td>
<td>
<table width="90%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="60%">


 </td>
</tr>
</table>

</body>
</html>


 <html>
<head>
<title> Alleycode Easy Web Tutorial</title>
<meta name="Generator" content="AlleyCode">
<meta name="Description" content="Your description here...">
<meta name="Keywords" content="Your keywords here...">
<link rel="stylesheet" type="text/css" href="/tutorial/include/easy.css">
</head>

<body bgcolor="#FFFFFF">
<?
include "$DOCUMENT_ROOT/tutorial/include/easyhead.txt";
?>
<blockquote>My About Page</blockquote>
<?
include "$DOCUMENT_ROOT/tutorial/include/easyfoot.txt";
?>

</body>
</html>


Undo
From the menu go to: Edit > Undo

Use this command to reverse the last editing action, if possible. This command is unavailable if there is no editing action done.

Keyboard shortcut: Ctrl+Z


Unlock Alleycode
From the menu go to: Help > Unlock Alleycode

NOTE: This menu option is only visible in a unregistered version of Alleycode.

Click to activate "Username" dialog. Enter username exactly as received in your registration email (case sensitive). Click OK! Next dialog prompts you to enter your unlock code. Enter your unlock code exactly as received in your registration email (case sensitive). Click OK!... You should get a "Thank you" for registering Alleycode.

Problems?... Contact: support@alleycode.com


WordWrap
From the menu go to: Edit > WordWrap.

Use this command to automatically wrap a sentence at the end of your working window. Wrap option can be set permanently in Preferences.

Keyboard shortcut: Ctrl+W